带有 Angular 路由的 Angular 元素

Question

我想在作为自定义元素引导的组件中使用 Angular 路由。看来，如果我在页面上放置多个自定义元素，则只有最后一个元素会接收路由器 socket 。

这是带有 a sample on GitHub 的仓库

我通过以下方式生成了这个示例项目:

ng new(带路由)

ng 添加@angular/elements

通过 createCustomElement 更改为 Bootstrap (my-el 是元素名称)

将 TypeScript“目标”更改为 Es6

将 Index.html 更改为托管两个 my-el 元素

你知道为什么只有我的组件的最后一个实例有路由输出，而所有其他实例都路由到那个元素吗？

Answer 1

这是因为每个模块只能有一个主路由器 socket 。 (主导出是模板中没有指定名称的导出)
我发现这篇文章很有帮助:https://www.techiediaries.com/angular-router-multiple-outlets/

您可以通过命名您的网点来解决这个问题 - 但由于您使用的是相同的应用程序组件，我认为您将需要一些类似的东西:

app.component.ts:

@Input() name: string;

getRouterLink(url: string): object {
    return { outlets: { primary: url, first: url, second: url } };
}

索引.html

<my-el name="first"></my-el>
<my-el name="second"></my-el>

应用程序路由.module.ts:

const routes: Routes = [
    { path: "", redirectTo: "page1", pathMatch: "full" },
    { path: "page1", component: Page1Component },
    { path: "page2", component: Page1Component },
    { outlet: "first", path: "page1", component: Page1Component },
    { outlet: "first", path: "page2", component: Page2Component },
    { outlet: "second", path: "page1", component: Page1Component },
    { outlet: "second", path: "page2", component: Page2Component }
];

app.component.html:

<h2><a href="#" [routerLink]="getRouterLink('page1')">Page1</a></h2>
<h2><a href="#" [routerLink]="getRouterLink('page2')">Page2</a></h2>
<ng-container *ngIf="name === 'first'">
    <router-outlet name="first"></router-outlet>
</ng-container>
<ng-container *ngIf="name === 'second'">
    <router-outlet name="second"></router-outlet>
</ng-container>

这可以做得更好，但应该足以说明这一点。

我已经尝试动态绑定(bind)路由器导出的“名称”( <router-outlet [name]="name">)所以它没有包装在那些 ng-containers 中，但这是不可能的，因为“名称”是 @Attribute 而不是路由器导出的 @Input( https://github.com/angular/angular/blob/f8096d499324cf0961f092944bbaedd05364eea1/packages/router/src/directives/router_outlet.ts#L50)