Angular 2使组件相互重叠

Question

Angular 2默认将组件放在另一个组件下面或旁边。

是否有可能让它们随意重叠？

感谢。

Answer 1

组件只不过是一个HTML元素。您必须使用css让它们重叠。要定位组件本身，您必须使用:host选择器：

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

<强>一组分

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

此组件将与其他组件重叠：

<强> B成分

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