在 Angular 中访问另一个组件的功能时,此关键字不起作用

When accessing another component's function in Angular, this keyword is not working

提问人:Laharee 提问时间:4/25/2023 最后编辑:Khaled AyedLaharee 更新时间:4/25/2023 访问量:69

问:

export class ComponeComponent implements OnInit {

  constructor(private cService: CService, private toastr: ToastrService) { }

  //class variable so that I can assign perticular client object
  clientObj: any;

  //to get all the client
  clients: any[] = [];

  /**
   * getting all the clients
   */
  ngOnInit() {
    this.cService.getClient().subscribe(
      (page: any) => {
        this.clients = page.payload;
      }
    );
    this.toastr.warning("Sorry, problem in loading records in client");
  }

  ....

  /**
   * Deleting particular Client
   */
  deleteClient() {
    this.cService.deleteClient(this.clientObj.id).subscribe(
      response => {
        console.log('Client record Deleted!', response);
        console.log(this.clientObj.id);
        this.toastr.error("Client record Deleted");
        console.log(this.clientObj.id);
        this.ngOnInit();
      }
    );
  }
}

现在每个人都工作正常,但不能,或者当我单击任何其他按钮时,吐司正在工作。console.logdeleteClientthis.toastr.error("Client record Deleted");this.ngOnInit();sidebar component

我从另一个组件调用它,该组件也在不同的模块中。deleteClint()

这是在我的应用程序模块中

....
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    ....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    ToastrModule.forRoot({
      closeButton: true,
      enableHtml: true,
      timeOut: 5000,
      positionClass: 'toast-top-right',
    }),
    BrowserAnimationsModule,
    HttpClientModule
  ],

我尝试重新排列我调用吐司的位置,因为我认为它不起作用。但事实并非如此。我尝试过不同的吐司姿势,但这不是那个问题。在不同的行之后,很明显,它跳过了带有此关键字的行。同样,这并不是说吐司不起作用。假设这是客户端组件在侧边栏中使用客户端按钮打开。当我在带有秒的侧边栏中单击主页或员工(假设)时,我可以看到那里的吐司。否则永远不会。 我也尝试在 const var 中分配这个关键字。console.logconsole.log

这个 angular-components ngoninit ngx-toastr

评论

2赞 Harun Yilmaz 4/25/2023
由于该方法不是箭头函数,因此需要将其引用到调用它的组件的引用。类似的东西deleteClientbind(someComponent.deleteClient.bind(someComponent))()
2赞 heaxyh 4/25/2023
您可以绑定组件或创建一个匿名函数,例如并将其传递给它。foo{ bar = () => {console.log('your function')}}

答: 暂无答案