angular - 从父级访问路由器导出组件

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

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

父组件

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

模板

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

子组件

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