从 parent 访问路由器出口组件

Question

我有以下应用根目录：

@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: `<button (click)="callChildFunction()">Close</button>
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }

    callChildFunction(){
        // Call myFunction() here
    }

}

这是我的 child（router-outlet 中使用的组件）：

@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }

    myFunction(){
        console.log('success');
    }

}

我发现我可以使用 RouterOutlet 来获取组件功能，但它似乎无法从应用程序根目录中访问。

如何从应用根目录调用 myFunction()？

Answer 1

Router-outlet 与路由相关，与访问子组件无关methods.You访问子组件功能必须使用@ViewChild，parent.You可以找到例子here

更新

如果以上在您的情况下不是可行的解决方案，您可以利用激活事件来获取路由器插座内实例化组件的引用。

来自文档

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.

因此您可以使用这些功能并完成您的工作 done.You 可以看到详尽的答案并且在同一答案中附有一个 plunker

Answer 2

利用 activate 相同的事件。每当我们在路由器出口加载一个组件时，都会发出一个激活事件，利用它来获取组件引用并调用相应的方法。

父组件

  <div class="container">
    <router-outlet (activate)="onActivate($event)"></router-outlet>
  </div>

模板

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

儿童比赛

 works(){
    console.log("works");
  }

Answer 3

@Rahul Singh 的一个小补充：

请务必检查
中返回了哪个组件实例（以 Rahul 为例）onActivate(componentRef) 方法，
并且只调用works()，如果那个组件确实有这样的方法。

示例：

     onActivate(componentRef){
       if(componentRef instanceof ChildWithWorksMethodComponent){
         componentRef.works();
         return;
         }
         console.log("This is not the ChildWithWorksMethodComponent");
      }

否则，每次导航到路由时，哪个组件没有这样的方法，您的控制台日志将充满错误，如：

ERROR TypeError: componentRef.works is not a function

Answer 4

更多信息，您也可以访问 ChildComponent 的变量。

儿童比赛

export class ChildComponent {
    my_var= true;
}

父组件

// 模板

<div class="container">
    <router-outlet (activate)="onActivate($event)"></router-outlet>
  </div>


  onActivate(componentRef){
    console.log(componentRef.my_var);
  }

从 parent 访问路由器出口组件

Access router outlet component from parent

angular

angular-router