相关疑难解决方法(0)

我想在我的组件中显示不同的模板.只有一个会显示.如果hasURL是true,我想表明<a></a>.如果hasURL是false,我想表明<button></button>.

问题如果hasURL为false,组件显示按钮,但ng-content为空.因为它已经在第一篇中读到了"a></a>

有没有办法解决这个问题？

        <a class="bouton" href="{{ href }}" *ngIf="hasURL">
            <ng-content>
            </ng-content>
        </a>

        <button class="bouton" *ngIf="!hasURL">
            <ng-content>
            </ng-content>    
        </button>

谢谢!

我们想放入一个ng-content内部,*ngFor然后指定ng-content使用包含ngFor的组件的内容.可能吗？

<li *ngFor="let data of dataSource">
  <ng-content></ng-content>
</li>

演示

如何使用组件作为 Angular 中另一个组件的输入数据？

例如：

我想要构建表格组件AppTableComponent：

<app-table [dataSource]="dataSource" [columns]="columns">\n  <ng-container tableColumnDef="actions">\n    <a routerLink="/model/edit/{{item.id}}" routerLinkActive="active">Edit</a>\n    <a routerLink="/model/delete/{{item.id}}" routerLinkActive="active">Delete</a>\n  </ng-container>\n  <ng-container tableColumnDef="isActive">\n    <div [ngClass]="{cercl:true, \'is-active\':item.is_active}">&nbsp;</div>\n  </ng-container>\n</app-table>\n

dataSource是数据数组之和，如Model[]orPerson[]或Car[]。columns是一个字符串数组，如[\'id\', \'isActive\', \'name\', \'actions\']. 它应该包含数据源行属性名称或附加列名称。

我知道如何使用ng-content，但它不是相同的情况。不同之处在于我应该在多个地方使用部分内容。也许我应该使用 ng-contet，但我不知道\xe2\x80\x99t 是什么。

我确信我的目标是可能的，因为 Angular 材质表的工作原理如下：

<mat-table #table [dataSource]="dataSource">\n    <ng-container matColumnDef="position"></ng-container>\n    <ng-container matColumnDef="weight"></ng-container>\n</mat-table>\n

请不要建议我使用 Angular 材料表组件。我不需要桌子。我只是想学点新东西。

我将非常感谢有关该主题的任何信息或文章！