Question

我的Angular 2应用程序中有两个组件，它们各自在SASS文件中定义不同的样式。不幸的是，似乎两个组件都是＆＃39;正在为两个组件加载样式，导致html和正文样式冲突。

我的组件定义如下所示：

@Component({
    selector: 'signup',
    directives: [RouterOutlet, RouterLink],
    styles: [require('../sass/signup.scss').toString()],
    template: require('./signup.component.html')
})

和

@Component({
  selector: 'signin',
  directives: [RouterOutlet, RouterLink],
  styles: [require('../sass/signin.scss').toString()],
  template: require('./signin.component.html')
})

样式表如下所示：

// signup.scss
html, body {
    height:100%;
    background-color: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

和

// signin.scss
html, body {
    height:100%;
    background-color: #373746;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

两个组件的背景颜色为#373746。

有什么想法？我可以轻松地创建两个单独的<div>与ids或类，但这将是一个解决方法;随着我的应用程序的增长，我真的不想跟踪为哪些组件定义哪些样式。

Answer 1

如果你在ng2组件中添加styles，这是为了设置样式，而不是整个页面（你使用选择器html＆amp; body）。

你可以这样做：

  @Component({
      selector: 'signup',
      directives: [RouterOutlet, RouterLink],
      styles: ['
        signup {
          background-color: red;
        }
      '],
      template: '<p>I\'m the signup with red background!</p>'
  })

  @Component({
      selector: 'signin',
      directives: [RouterOutlet, RouterLink],
      styles: ['
        signin {
          background-color: blue;
        }
      '],
      template: '<p>I\'m the signin with blue background!</p>'
  })

Answer 2

你总是可以给你的身体一个id，然后在相关的组件打字稿文件中改变背景css属性：

ngOnInit () {
    document.getElementById('body').style.background-color = "#eaeaea";
}

使用组件样式会导致冲突的html / body样式

2 个答案: