角材料：创建可由“父元素”访问的组件？

Kermer 发表于常见问题

克尔默

注意

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

情况

所以这是我的问题，我有一个主页组件，该主页组件具有“角材料网格”列表：

<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

费明

我找到了一种解决方法来使其正常工作。也许这与某些棱角分明的材料问题有关。

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

现在工作了。请让我知道您是否还需要其他东西！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。