Question

我在系统中使用了一个名为cat的自定义组件，

<cat>
   <b>This is a cat</b>
</cat>

在cat组件模板中，我想显示嵌套在上面使用cat组件的数据（在此示例中，加粗的“这是一只猫”文本。

这是什么语法？类似于（cat.ts）：

{{showblockComponentContentSomethingLikeYeld}}

Answer 1

Cat组件是子组件，具有子“ Cat”组件的父组件应该与您提到的一样：

`<app-child><h1>Hello World</h1></app-child>`

虽然这是技巧，但有角度的方法是使用ng-container。在子级“猫”组件中：

<ng-content></ng-content>

希望有帮助，祝你好运

Answer 2

类似这样的东西

<cat>
  <blockcomponent *databinding attributes classes*></blockcomponent>
</cat>

其中cat和blockcomponent是两个独立的组件。

Answer 3

您可以将内容传递给cat组件，然后在cat.html中进行呈现，而不是在选择器之间嵌套内容。像这样：

<cat [myContent]="This is a cat"></cat>

然后在您的组件中添加以下内容：

import { Component, Input } from '@angular/core';
[...]
@Component({
  [...],
  selector: 'cat'
})
export class MyCatComponent {

@Input() myContent: string;

[...]

}

和cat.html中的

{{ myContent }}

或者，如果您要传递HTML标记

<div [innerHTML]="{{ myContent }}"></div>

或者，尝试以下先前回答的选项： Render content between the component tags

如何在另一个组件内部显示块组件？

3 个答案: