Angular Material：创建“父元素”可以访问的组件？答案

【问题标题】：Angular Material: Create component that can be accessed by the 'parent element'?Angular Material：创建“父元素”可以访问的组件？
【发布时间】：2020-10-16 15:03:46
【问题描述】：

注意

这篇文章的标题可能听起来与这篇文章的内容不相关，因为我不知道如何用一句话来表达。另外，很抱歉，如果其他人已经问过这个问题，但我找不到任何问题。

情况

这是我的问题，我有一个主页组件，它有一个 Angular 材质网格列表：

<mat-grid-list cols="3" gutterSize="5px" class="{{ isMobile ? 'mobile' : '' }}">
     <app-grid-section title="My Stuff">Some Content</app-grid-section>
     <app-grid-section title="Follower's Stuff">Some Content</app-grid-section>
     <app-grid-section title="Following's Stuff">Some Content</app-grid-section>
</mat-grid-list>

我创建了一个 GridSection 组件，模板如下所示：

<mat-grid-tile>
    <mat-grid-tile-header>{{ title }}</mat-grid-tile-header>

    <ng-content></ng-content>
</mat-grid-tile>

问题

当我查看页面时，它是纯空白的。我在 chrome 中运行“检查”，我看到那里的元素，但它们没有显示在页面上。是因为mat-grid-tile 必须是mat-grid-list 的直系后代吗？我希望不会，因为我计划让GridSection 组件像一个“网格图块模板”。

我使用 Angular CLI、Angular v10 或 8 以及 Visual Studio Code 作为文本编辑器。

Stackblitz 上的链接：https://stackblitz.com/edit/angular-ivy-q452c8?file=src/app/homepage/homepage.component.html

【问题讨论】：

你可以创建一些 plunker 或类似的东西来测试它吗？
@Ferrmin 我不知道这是否是我的电脑，但为了永远渲染 Angular 项目。
@Fermín 我决定在 StackBlitz 上发布我的问题。这是链接：stackblitz.com/edit/angular-ivy-q452c8?file=src/app/homepage/…

标签： angular angular-material angular-material2

【解决方案1】：

我找到了一种解决方法来让它工作。也许这与一些角度材料问题有关。

我在这里分叉了你的堆栈闪电战：https://angular-ivy-nvdxmx.stackblitz.io

我做了什么：

grid-section.component.ts

<mat-grid-tile-header>{{ title }}</mat-grid-tile-header>
<ng-content></ng-content>

homepage.component.html

<mat-grid-list cols="3" gutterSize="5px">
<mat-grid-tile>
    <app-grid-section title="My Stuff">Some Content</app-grid-section>
</mat-grid-tile>
<mat-grid-tile>
    <app-grid-section title="Follower's Stuff">Some Content</app-grid-section>
</mat-grid-tile>
<mat-grid-tile>
    <app-grid-section title="Following's Stuff">Some Content</app-grid-section>
</mat-grid-tile>

app.module.ts

@NgModule({
  imports: [BrowserModule, FormsModule, MatButtonModule, MatGridListModule],
  entryComponents: [HomepageComponent],
  declarations: [AppComponent, HomepageComponent, GridSectionComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

现在可以正常工作了。如果您还需要其他东西，请告诉我！

【讨论】：