Angular 2 Komponenten überlappen sich gegenseitig

Question

Angular 2 legt standardmäßig eine Komponente unter oder neben einer anderen Komponente an.

Ist es möglich, sie nach Belieben zu überlappen?

Danke.

Answer 1

Eine Komponente ist nichts anderes als ein HTML-Element. Sie müssen css verwenden, damit sie sich überlappen. Um die Komponente selbst ausrichten, müssen Sie den :host Selektor:

@Component({ 
    selector: 'app', 
    template: ` 
     <a-component></a-component> 
     <b-component></b-component> 
    ` 
}) 
export class AppComponent{} 

a-Komponente

@Component({ 
    selector: 'a-component', 
    template: 'I am A', 
    style: [` 
     :host { 
      position: fixed, 
      top: 0, 
      left: 0 
     } 
    `] 
}) 
export class AComponent{} 

Diese Komponente wird die andere Komponente überlappen:

b-Komponente

@Component({ 
    selector: 'b-component', 
    template: 'I am B', 
    style: [` 
     :host { 
      position: fixed, 
      top: 0, 
      left: 0 
     } 
    `] 
}) 
export class BComponent{}