html - 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{}

a-组件

@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{}