angular – 你可以使用@ViewChild()或类似的路由器插座吗？怎么

发布时间：2020-12-17 07:50:06 所属栏目：安全来源：网络整理

导读：我反复遇到一种情况,我想访问路由器插座另一侧存在的子组件而不是选择器： Like:router-outlet/router-outletNOT:selector-name/selector-name 这与我所知道的ViewChild功能相冲突,但似乎我的组件应该能够看到路由器内部的内容并与之交互,就像选择器标签内的

我反复遇到一种情况,我想访问路由器插座另一侧存在的子组件而不是选择器：

Like:
<router-outlet></router-outlet>

NOT:
<selector-name></selector-name>

这与我所知道的ViewChild功能相冲突,但似乎我的组件应该能够看到路由器内部的内容并与之交互,就像选择器标签内的内容一样容易.

比如我试过这个：

export class RequestItemCatsComp {
    @ViewChild('child') child: RequestItemsComp;
    ***etc...***
ngAfterViewInit() {
    if (this.child) // Always child is undefined
        this.groupId = this.child.groupId;
    }
}

但很自然,孩子是不确定的,因为这是错误的方式.有正确的方法吗？

我正在尝试使用服务来共享数据,但后来遇到另一个问题“表达式在检查后已经改变”,我希望在没有黑客或启用prod模式的情况下进行补救.

您可以点击激活事件以获取路由器插座内实例化组件的参考.

摘自RouterOutlet Docs

A router outlet will emit an activate event any time a new component
is being instantiated,and a deactivate event when it is being
destroyed.

例

@Component({
  selector: 'my-app',template: `<h3 class="title">Basic Angular 2</h3>
  <router-outlet (activate)="onActivate($event)" ></router-outlet>
  `
})
export class AppComponent {
  constructor(){}

  onActivate(componentRef){
    componentRef.sayhello();
  }
}

@Component({
  selector: 'my-app',template: `<h3 class="title">Dashboard</h3>
  `
})
export class DashboardComponent {
  constructor(){}

  sayhello(){
    console.log('hello!!');
  }
}

这是Plunker!!

希望这可以帮助！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!