Question

我正在使用angular-cdk并基于article生成动态角度分量 blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular 尝试执行此操作，似乎唯一可行的选择是使用命名路由器出口，例如位于<router-outlet name="outletname"></router-outlet>下的路由器出口，但是在这里，我无法绑定路由器出口的name属性，因此我尝试将数据绑定我已经重新使用了这个容器，所以这里的路由变得非常局部。

由于这是动态生成的组件，并且可以模块化，因此可以重复使用。在使用方面也可以重复相同的操作，例如：我可以在必须实现容器的各个地方重复使用动态生成的内容布局容器。因此，此容器必须根据我要渲染的路线的数据来渲染各种组件。

因此，此容器必须根据我要渲染的路线的数据来渲染各种组件。

有没有一种方法可以动态绑定名称，因此可以重用cdk组件而不会出现任何问题。

Answer 1

根据我的上述评论：目前无法绑定到名称，尽管这是在github.com/angular/angular/issues/12522上找到的功能请求，导致github.com/angular/angular/issues/ 17173了解如何解决它的有趣想法/实现。

听起来好像变通方法有所帮助，但现在您需要能够在routerLink中动态设置路由器名称。我有两个建议：

1）您可以尝试使用computed keys来查看Angular是否可以在模板中正确内插它们。

// in Component:   let dynamicRoute = conditionMet ? "blogviewolet" : "otherOutlet";
// in template:    [routerLink] = "[{ outlets: { [dynamicRoute]: [panels.getData('anchor-link-path').fieldValue] } }]"

2）如果＃1失败，则可以尝试从Component传递[routerLink]一个javascript对象，而不是总是在模板中进行设置。如果您能够执行routerLink逻辑说，则在加载视图之前，可以设置变量并将其传递给routerLink。

// in Component 

   theOutlet: any;

   if (conditionMet) {
       this.theOutletObject = [{ outlets: { someOutlet: [ foo ]}}];
   } else {
       this.theOutletObject = [{ outlets: { someOtherOutlet: [ bar ]}}];
   }

// in template:  

   <a [routerLink]="theOutletObject"></a>

如何将“名称”绑定到路由器插座以呈现动态创建的angular-cdk组件

1 个答案: