Angular Material：创建可以被'parent element'访问的组件？

Question

备注

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

情况

所以这是我的问题，我有一个主页组件，其中有一个 Angular Material 网格列表：

<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 代码作为文本编辑器。

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

Answer 1

我找到了一个解决方法来让它工作。也许这与某些 angular material 问题有关。

我在这里分叉了你的 stackblitz：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 {}

现在可以使用了。如果您需要其他东西，请告诉我！

Angular Material：创建可以被'parent element'访问的组件？

Angular Material: Create component that can be accessed by the 'parent element'?

angular-material

angular-material2

angular

备注

情况

问题