Angular 内容投影的现代方法是什么？

Question

我发现了很多 transclude/content 项目的旧方法，我遵循了这里找到的最新方法（我假设）：https://blog.angular-university.io/angular-ng-content/

我正在尝试将另一个组件 html 文件包含在另一个组件的模式中。它们是兄弟组件，而不是 parent/child，这就是我认为它不起作用的原因。

谁能指引我正确的方向？

对话框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 包含在我想要包含的模块中

Answer 1

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

我只是将选择器包含在 HTML 中，就像您放置组件时所做的那样：

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

区别在于它是同级组件，您必须导入模块。如果您导入该组件，Angular 会抱怨您导入它两次（一次在对话模块中，一次在测试模块中）。

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

@NgModule({
    imports: [
        TermsOfServiceModule
    ],

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

exports: [
    TestComponent
],

有点棘手的细微差别，希望以后能对其他人有所帮助。

Angular 内容投影的现代方法是什么？

What is the modern way to do Angular content projection?

angular-material2

angular

angular5