共价 Angular 移动到自己的组件

Question

也许我正在尝试一些完全错误的事情，但我想将我的工具栏内容移动到我自己的组件中。之前：

 <td-layout-nav navigationRoute="/">
        <div td-toolbar-content layout="row" layout-align="start center" flex>
            <button mat-icon-button td-menu-button tdLayoutToggle>
                <mat-icon>menu</mat-icon>
            </button>
            <td-search-box class="pad-top-xs" backIcon="search" placeholder="Search here" [showUnderline]="false" [debounce]="500" [alwaysVisible]="false">
            </td-search-box>
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
            <a mat-icon-button matTooltip="Docs" [routerLink]="" href="https://teradata.github.io/covalent/" target="_blank">
                <mat-icon>chrome_reader_mode</mat-icon>
            </a>
        </div>

and my goal is something like
        <td-layout-nav navigationRoute="/">
            <my-own-toolbar-component></my-own-toolbar-component>

现在的问题是我的布局变得 "destroyed"

那是因为内容现在被来自组件选择器的附加 div 包围。但是有没有可能克服这个问题呢？还是我的目标完全错误？这是一个显示我的问题的分叉 Stackblitz。

Stackblitz

Answer 1

这可以通过使用组件上的 td-toolbar-content 属性来完成。

<td-layout-nav navigationRoute="/">
    <my-own-toolbar-component td-toolbar-content></my-own-toolbar-component>
    ...
</td-layout-nav>

共价 Angular 移动到自己的组件

Covalent Angular move to own component

angular-material2

angular

teradata-covalent