Rendering komponentów Angular2 według selektora klasy - kątowy, kątowy2-szablon

Moje pytanie jest proste, ale wierzcie mi, próbuję owinąć głowę od wielu godzin.

Istnieje komponent, który należy utworzyć za pomocą selektora klasy.

@Component({
selector: ".mycomponent",
template: "<h1>hello!</h1>"
})
export class MyComponent{}

Powiedzmy, że element nadrzędny wygląda następująco:

@Component({
...
template:
`
<div class="mycomponent"></div> <!-- rendered -->
<div [class]=""mycomponent""></div> <!-- not rendered -->
`
})
export class ParentComponent{}

Dlaczego druga wersja nigdy nie jestrenderowane? Jak mam to zrobić? Czy to problem z wykrywaniem zmian, czy po prostu nie powinien działać w ten sposób? Grałem ze strategią wykrywania zmian, która nie przyniosła żadnego efektu. Też natknąłem się DynamicComponentLoader. Mam nadzieję, że uda mi się z niego korzystać.

Czy istnieje sposób na dynamiczne ładowanie komponentów za pomocą selektorów nieelementowych?

Odpowiedzi:

To nie powinno działać. Komponenty i dyrektywy są stosowane tylko do statycznie dodanych tagów, atrybutów i klas.

Jeśli chcesz dynamicznie dodawać / usuwać komponenty i dyrektywy użyj DynamicComponentLoader lub createComponent() z ViewContainerRef

Dlaczego to nie działa, ponieważ kiedy używasz [class], oznacza to, że „class” jest atrybutem, który nie przypisuje klasy „mycomponent” do div.