Question

我正在使用card定义自定义Angular 6组件。

我有以下文件：

card.component.html

<mat-card>
    <mat-card-content>
        <ng-content></ng-content>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

card.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-card',
    templateUrl: 'card.component.html',
    styleUrls: [ 'card.component.css' ],
})
export class CardComponent implements OnInit {

    private content: string;

    ngOnInit() {
        // I need to replace each 'a' by an 'e' to the innerHtml
        this.content = ??? what to put here ???;
    }
}

我想通过以下方式使用我的自定义card组件：

app.component.html

<app-card>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</app-card>

我的问题是我不知道要放在文件card.component.ts上的内容如何读取app.component.html上的自定义组件的内部内容。

关于如何使它起作用的任何想法？

谢谢！

Answer 1

我对情态也有类似的情况

例如 childComponenet.html

<div> 
 <span>
     <ng-content></ng-content> -- your html will replace here
 </span>
</div>

ParentComponent.html

    <abc>
       <new html here>
    </abc>

有关更多详细信息，您可以按照指南进行操作 https://blog.angular-university.io/angular-ng-content/

用内部内容定义自定义卡组件

1 个答案: