Создайте шаблон компонента, чтобы использовать его несколько раз - угловой

Question

Этот вопрос может показаться глупым, но я все равно попробую:

Можно ли использовать компонент несколько раз, но с другим содержимым? Что-то вроде шаблона.

Если быть точным , я хочу написать компонент только один раз, но затем использовать его в разных местах с разным содержанием - например, (я не знаю, имеет ли это какой-то смысл, и если да, то как его реализовать) , получив некоторый текст из выделенной модели, чтобы заполнить div, чтобы я мог добавить только дополнительную модель вместо редактировать сам компонент?

Answer 1

Используйте <ng-content>. Иллюстрация:

app.component.html

<my-component>
   <p>I'm getting projected into a component from outside because of ng-content</p>
</my-component>

my.component.html

<p>Data from my own component</p>
   <ng-content></ng-content>
<p>Data from my own component</p>

С помощью <ng-content> вы можете проецировать данные извне в ваш компонент. Вы можете использовать это несколькими способами, не меняя оригинальный компонент.

Answer 2

Для этого вы можете использовать ng-контент. Пожалуйста, найдите ниже псевдокод

<!-- card.component.html -->
<div class="card">
    <div class="card-header">
        {{ header }}
    </div>

    <!-- add the select attribute to ng-content -->
    <ng-content select="[card-body]"></ng-content>

    <div class="card-footer">
        {{ footer }}
    </div>
</div>

<!-- app.component.html -->

<h1>APP COMPONENT</h1>
<card header="my header" footer="my footer">

    <div class="card-block" card-body><!--  We add the card-body attribute here -->
        <h4 class="card-title">You can put any content here</h4>
        <p class="card-text">For example this line of text and</p>
        <a href="#" class="btn btn-primary">This button</a>
      </div>

<card>

Answer 3

Один из способов передачи данных компоненту с помощью ввода.

<my-component [text]="myText"></my-component>

А затем в компоненте вы можете получить текст с помощью:

@Input() text: Person;

и отобразить его в своемшаблон