如何将 "name" 绑定到路由器出口以呈现动态创建的 angular-cdk 组件

Question

我正在使用 angular-cdk 并基于 article 生成动态 angular 组件 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 关于如何绕过它的有趣 ideas/implementations。

听起来解决方法有所帮助，但您现在需要能够在 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 失败，您可以尝试从组件传递 [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>

如何将 "name" 绑定到路由器出口以呈现动态创建的 angular-cdk 组件

How to bind "name" to a router-outlet to render dynamically created angular-cdk components

routing

dynamic

angular

angular-router

angular-cdk