Angular 2 компонента с несколькими видами

Ответ 1

Сегодня также подумайте об этой проблеме. Я "изобретаю" это решение http://plnkr.co/edit/FYVwbBwSnqWRcvAVz3wh?p=preview. Может быть, это поможет вам в будущем.

export class MyModel {
  lala;
  constructor() {
    this.lala = "llaala";
  }
  appendToLala(param: string){
    this.lala += param;
  } 
}

@Component({
  selector: 'c1',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component1 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" bebebe");
  }
}


@Component({
  selector: 'c2',
  template: `<div><h2>Hello {{lala}}</h2></div>`,
})
export class Component2 extends MyModel {
  constructor(){
    super();
    this.appendToLala(" nenene");
  }
}

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

Ответ 2

Содержимое ng должно использоваться для определения того, куда вы хотите, чтобы содержимое вашего компонента было отправлено, объяснение следует:

Скажите, что вы определяете свой собственный компонент с его шаблоном и селектором "my-cmp", если вы используете его как таковой: <my-cmp><div>content</div></my-cmp>, div внутри вашего компонента должен куда-то идти, это то, что вы определяете в шаблоне, когда вы реализуете my-cmp. Скажем: <h1>my component title</h1><ng-content></ng-content> ваш div пойдет туда, где будет размещено содержимое ng.

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

Или, если вы хотите отображать один или другой, возможно, его можно обрабатывать с помощью маршрутов?

Или последним способом будет ng-if, если у вас есть определенное состояние в вашей модели, тогда отобразите один дочерний компонент, иначе отобразите другой.

Если вы немного более конкретно о том, что у вас есть, я мог бы составить несколько кода.

Ответ 3

Вот как я справился с этим, хотя мне не нравится решение:

• У меня есть компонент myComponent, который отображает selector: 'my-component'.
• В моем основном приложении я создаю две переменные target:string = 'template-one' и target2:string = 'template-two'.
• Я создаю два экземпляра компонента в моем шаблоне приложения, который выглядит как <my-component [target]="target"></my-component> и <my-component [target]="target2"></my-component>.
• Наконец, в шаблоне для my-component у меня есть два разных блока разметки, первый предназначенный для target === "template-one", а второй для target === "template-two". На внешнем элементе html для одного я помещаю *ngIf="target === 'template-one'", а на внешний элемент html для другого я помещаю *ngIf="target === 'template-two'", который эффективно создает fork в рендеринге.

Я могу отправить сообщение, если я придумаю что-то лучшее, но пока это лучшее, что я мог бы сделать с тем, что мне дал Angular 2.

Ответ 4

Не уверен, что NG2 имеет встроенный способ поддержки этого.

Похоже, вам нужны два компонента, но у вас есть один, и вы привязываетесь, чтобы найти быстрый способ. Но лучшим решением будет разделение сложной логики на разные структуры (например, сервисы, другие модули и т.д.). Лучше всего это сделать структуру, с которой будет удобно работать. И когда вы создадите эту структуру - вам не нужно будет указывать несколько html в директиве.

Ответ 5

Если вы просто пытаетесь изменить то, что отображается в представлении для одного пользовательского сеанса, на основе значения переменной в вашем компоненте, вы можете рассмотреть возможность размещения вашего html в различных элементах div и использовать ngIf или ngSwitch для переключения между ними.

Быстрый и дешевый пример, если в вашем компоненте есть логическая переменная с именем "loading", вы можете переключаться между тем, что отображается следующим образом:

<div *ngIf="loading">
    <h1>Loading...</h1>
</div>

<div *ngIf="!loading">
...
</div>