带有 Angular 路由的 Angular 元素答案

【问题标题】：Angular elements with Angular routing带有 Angular 路由的 Angular 元素
【发布时间】：2019-04-28 01:08:24
【问题描述】：

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

这是a sample on GitHub 的仓库

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

ng 新（带路由）
ng 添加@angular/elements
通过 createCustomElement 更改为引导程序（my-el 是元素名称）
将 TypeScript“目标”更改为 Es6
将 Index.html 更改为托管两个 my-el 元素

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

【问题讨论】：

标签： angular

【解决方案1】：

这是因为每个模块只能有一个主路由器插座。（主插座是模板中没有指定名称的插座）我发现这篇文章很有帮助：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 } };
}

index.html

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

app-routing.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>

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

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

【讨论】：