Question

我使用angular2将外部html加载到组件中，html内容已成功加载到组件中，但html文件中的css样式尚未应用。

这是我的组件

@Component({
  selector: 'faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.css']
})
export class TestComponent implements OnInit {

  constructor(
              private http:Http) { }

  template;

  ngOnInit() {
    var self = this;
    var href = "/assets/faq.html";
    this.http.get('./assets/test.html')
               .map(res =>res.text())
               .subscribe(
                     (res: any) =>{
                   this.template = res;
               });
  }
}

scss文件

.accordion-item a {
    font-family: 'Montserrat' !important;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding: 1rem 4.5rem 1rem 1rem;
    color: #373c46;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
}

.accordion-item a.active {
    color: #4747d1;
    /* border-bottom: 1px solid #4747d1; */
}

.accordion-item .content {
    //display: none;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    color: #868692;
}

的faq.html

<div class="container">
          <div class="f-intro accordion-section">
            <div class="col-md-10 col-md-offset-1">
              <h1 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">FAQ</h1>
              <div class="accordion">
            <div [innerHTML]="template" class="accordion"> </div>
          </div>
        </div>
</div>

外部HTML

  <div class="accordion-item">
    <a class=""> I read this section, but i still have questions.. </a>
    <div class="content" >
      <p id="txt_lib-rep-bod">We invite you to our Slack chat (link in main menu). We cant be there 24/7 but we will respond your question there ASAP! </p>
    </div>
  </div>

Answer 1

由于您使用了Emulated ViewEncapsulation（默认）选项，它为组件样式和DOM元素添加了额外的唯一属性。因此，当您想要对驻留在当前组件HTML或其后代树中的特定元素应用某些样式时。然后你可以在CSS样式规则之前使用/deep/。

但很快/deep/，>>>和::ng-deep选项就会下降。 Angular团队建议使用::ng-deep，所以请改用它。

::ng-deep .accordion-item a {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item a.active {
    /*CSS Rule as is*/
}

::ng-deep .accordion-item .content {
    /*CSS Rule as is*/
}

成功加载html内容但是在angular2中没有应用css样式？

1 个答案: