Angular: как показать графический компонент с помощью программирования (файлы .ts)?

Question

Я занимаюсь разработкой веб-приложения на Angular 6. У меня вопрос:

Графический компонент - это шаблон HTML, связанный с логикой внутри файла .ts. Если в другом файле машинописи (связанном с другим компонентом) я создаю объект, который на самом деле является компонентом, как я могу графически визуализировать этот объект в шаблоне?

Пример кода:

Компонент 1 (.ts и .html):

class MyComponent1 {
 constructor(myString: string){}
}
--------------------------------
<p>My Component 1!</p>

Компонент 2 (.ts и .html):

class MyComponent2 {
 constructor(){
 }

 method() {
  let newComponent = new MyComponent1('a casual string');
  return newComponent;
 }
}
---------------------------------
{{method()}}

В html myComponent2 я хотел бы отобразить строку «Мой компонент 1!» (это графическая часть компонента), а не [объект объекта]. Как это сделать? Большое спасибо!

Answer 1

Это основы того, как использовать компонент, вы быстро освоитесь с этими концепциями. Вы можете быстро взглянуть на Угловые документы .

Идея такова: когда вы определяете свои компоненты, у вас есть:

@Component({
  selector: 'componentXX',
  // ...
} export class XXXComponent ...

Затем из другого компонента вы просто используете это в шаблоне HTML: <componentXX></componentXX>, и он будет тянуть ваш компонент - учитывая, что он находится в той же области действия, а пока оставайтесь в том же модуле, чтобы узнать об основах.

Answer 2

Просто вызовите объект в .Html, например

My Component 1!

в шаблоне или в HTML-файле Спасибо!

Answer 3

Я думаю, вы можете использовать директиву * ngIf для этой реализации. Вы можете перечислить все возможные компоненты в представлении (если возможно) и показать их при необходимости.

Или другой подход может использовать elementRef . Вы можете использовать его и внедрить свой компонент так же, как вы делаете это в JavaScript.

Другой подход может заключаться в том, что вы можете использовать маршрутизацию в этом случае просто вставьте в шаблон и направьте свою страницу в соответствии с вашей логикой.

Вы можете проверить динамические компоненты в угловой документации Динамические компоненты

Я бы предложил использовать для этого маршрутизацию.