在组件中创建占位符

Question

在 Angular 4 中，假设您需要实现一个允许其用户在其中定义自定义内容的组件。

示例：

@Component({
    selector: "main-navigation",
    templateUrl: `
<md-sidenav-container>
    <md-sidenav mode="side" positio="start" opened="true">
        <md-nav-list>
            <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a>
        </md-nav-list>
    </md-sidenav>

    <!-- Some placeholder for user's: content should go here -->

</md-sidenav-container>`
})

该组件的预期用途如下：

<main-navigation>
    <router-outlet></router-outlet> <!-- <- this is some user content -->
</main-navigation>

在 Angular 4 中创建这种占位符的最简单方法是什么？

Answer 1

将 <ng-content></ng-content> 添加到此处是否就是您要查找的内容？

@Component({
    selector: "main-navigation",
    templateUrl: `
<md-sidenav-container>
    <md-sidenav mode="side" positio="start" opened="true">
        <md-nav-list>
            <a md-list-item *ngFor="let link of links" routerLink="{{link.url}}" routerLinkActive="active">{{link.text}}</a>
        </md-nav-list>
    </md-sidenav>

    <ng-content></ng-content> <!-- Some placeholder for user's: content should go here -->

</md-sidenav-container>`
})

这可能会添加 <router-outlet></router-outlet> 以及用户在 <main-navigation> </main-navigation> 标签之间放置的任何其他内容。不确定这是否是您想要的行为，但如果您对此进行更多澄清，也许我可以重新评估我的答案。

Answer 2

作为答案的进一步发展。

如果您想命名占位符，可能的方法之一如下：

...
<ng-content select="content"></ng-content>
...

那么，你可以这样做：

<main-navigation>
    <content>
        <router-outlet></router-outlet>
    </content>
</main-navigation>

感谢 this awesome post。

在组件中创建占位符

Create a placholder in component

html

typescript

angular-components

angular