首页 文章

做角度内容投影的现代方法是什么？

提问于
浏览 次
0

我找到了很多旧的方法来转换/内容项目，我按照这里找到的最新方法（我假设）：https://blog.angular-university.io/angular-ng-content/

我试图在另一个组件中的模态中包含另一个组件html文件 . 他们是兄弟姐妹的组成部分，而不是父母/孩子，这就是为什么我认为它不起作用 .

任何人都可以引导我朝着正确的方向前进吗？

对话框html：

<h1 mat-dialog-title>
    Title here
</h1>

<div mat-dialog-content>
    <ng-content></ng-content>
</div>

<div mat-dialog-actions>
    Actions here
</div>

对话框组件：

import {Component, OnInit}                   from '@angular/core';
import {MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA}                     from '@angular/material';

@Component({
    selector    : 'test-dialog',
    templateUrl : 'test-dialog.html',
    styleUrls   : ['./test-dialog.scss']
})
export class Test implements OnInit
{
    constructor(public  dialog: MatDialog) {}

    ngOnInit(){}
}

test.html，我想要包括的内容：

<test-dialog>
    I want to include this content
</test-dialog>

测试组件：

import {Component, OnInit}      from '@angular/core';
import {Router}                 from '@angular/router';

@Component({
    selector    : 'test-component',
    templateUrl : './test.html'
})

export class TestComponent implements OnInit
{

    constructor(public router: Router) {}

    ngOnInit(){}
}

编辑：我也已经将 CUSTOM_ELEMENTS_SCHEMA 包含在我想要包含的模块中

angular angular5 angular-material2

1 回答

  • 0

    我在朋友的帮助下回答了这个问题 .

    我只是将选择器包含在HTML中，就像放置组件时一样：

    <div mat-dialog-content>
    <test-component>
    </test-component>
</div>

    不同之处在于它是一个兄弟组件，您必须导入该模块 . 如果您导入组件，Angular会抱怨您导入它两次（一次在对话框模块中，一次在测试模块中） .

    import {TestModule}       from '../test/test.module';

@NgModule({
    imports: [
        TermsOfServiceModule
    ],

    在test.module中，您必须导出组件

    exports: [
    TestComponent
],

    稍微有点棘手的细微差别我希望将来可以帮助其他人 .

    回复于

相关问题