将bootstrap css和我的自定义css应用于父组件的子组件

Question

我有一个带有bootstrap top navbar（带有我的自定义css）模板的父组件，如下所示：

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}

这是我的翻译组件：

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template:'<nav class="navbar navbar-inverse navbar-fixed-top">
              <div class="container-fluid">
                <ul class="nav navbar-nav">
                  <li routerLinkActive="active">
                    <a routerLink="home" translate><i class="fa fa-home" 
                       aria-hidden="true"></i>Home</a>
                  </li>
                  <li routerLinkActive="active">
                    <a routerLink="home" translate><i class="fa fa-home" 
                       aria-hidden="true"></i>Projects</a>
                  </li>
                </ul>
                  <ul class="nav navbar-nav navbar-right">
                    <app-translate></app-translate>
                    <li routerLinkActive="active">
                     <a href="#"><i class="fa fa-user-circle" 
                        aria-hidden="true"></i>SignUp</a>
                    </li>
                    <li routerLinkActive="active">
                      <a href="#"><i class="fa fa-sign-in" aria-
                        hidden="true"></i>Login</a>
                    </li>
                  </ul>
              </div>
            </nav>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

在我的app-translate组件中，我希望实现列表的正常行为，并从父组件应用所有bootstrap css和我的自定义css，并将我自己的custon css添加到translate组件。但结果并不像预期的那样。我怎样才能做到这一点？