Как отобразить блочный компонент внутри другого?
У меня есть пользовательский компонент под названием cat, используемый в системе следующим образом:
<cat>
<b>This is a cat</b>
</cat>
Внутри шаблона компонента кошки я хотел бы показать данные, вложенные в использование компонента кошки выше (в этом примере текст «Это кошка» выделен жирным шрифтом.
Какой синтаксис для этого? Что-то вроде (cat.ts):
{{showblockComponentContentSomethingLikeYeld}}
Что такое компонент блокировать?
Кот жив или мертв?
Ответы 3
Что-то вроде этого
<cat>
<blockcomponent *databinding attributes classes*></blockcomponent>
</cat>
Где компонент cat и block - это два отдельных компонента.
Компонент Cat является дочерним компонентом, родительский компонент, который имеет дочерний компонент "Cat", должен быть таким, как вы упомянули:
`<app-child><h1>Hello World</h1></app-child>`
Хотя вот в чем хитрость, угловой способ заключается в использовании ng-container. В дочернем компоненте "Кот":
<ng-content></ng-content>
Надеюсь поможет и удачи
Спасибо! Это именно то, что мне было нужно
Вместо того, чтобы вкладывать содержимое между селекторами, вы можете передать его своему компоненту 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>
или попробуйте этот ранее отвеченный вариант: Рендеринг содержимого между тегами компонента
Вам нужно объяснить немного больше