22

我有以下应用程序根：

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

    constructor() {

    }

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

}

这是我的孩子（在 中使用的组件router-outlet）：

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

    constructor() {

    }

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

}

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

如何myFunction()从应用程序根调用？

4

4 回答 4

40

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

父组件

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

模板

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

儿童补偿

 works(){
    console.log("works");
  }
于 2017-08-16T19:07:59.147 回答
6

@Rahul Singh 的一个小补充：

确保检查在
（停留在 Rahul 的示例） onActivate(componentRef)方法中返回了哪个组件实例，
并且仅works()在该组件确实具有这样的方法时才调用。

例子： 

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

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

错误类型错误：componentRef.works 不是函数

于 2019-05-12T19:45:51.047 回答
1

Router-outlet 与路由有关，它与访问子组件方法无关。您必须使用@ViewChild 从父组件访问子组件功能。您可以在此处找到示例

更新

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

从文档

每当实例化新组件时，路由器出口都会发出激活事件，并在销毁组件时发出停用事件。

因此，您可以使用这些功能并完成您的工作。您可以在此处查看详细的答案，并且在同一答案中附加了一个 plunker

于 2017-08-16T18:36:25.557 回答
0

有关更多信息，您也可以访问 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);
  }
于 2021-10-08T09:10:19.200 回答