Routing of the the pages in AngularJS disturbs the design

Question

I'm trying to route index.component.html (homepage) to about.component.html (about page) . However, routing works perfectly. But when I'm redirected to about page from homepage the design of about page gets disturbed. I have included the source code.

about.component.html

<!-- Start ignoring BootLintBear-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../about/about.component.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 
<!-- Stop ignoring BootLintBear-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="//susper.com">
                <img alt="brand" class="navbar-logo" src="../../assets/images/susper.svg">
            </a>
        </div>
        <p class="navbar-text navbar-right">About Page</p>
    </div>
</nav>  
<div class="image-banner">
    <img src="../../assets/images/mountain.jpg" class="img-responsive banner">
</div>
<div class="container">
    <br>
    <h2 class="text-center">Susper is a decentral Search Engine that uses the peer to peer system 'YaCy' and 'Apache Solr' to crawl and index search results.</h2>
    <br>
    <div class="row">
        <div class="col-lg-4 col-sm-12">
            <h5 class="bold">About YaCy</h5>
            <p>YaCy is a free search engine that anyone can use to build a search portal for their intranet or to help search the public internet. Read more about YaCy here - <a href="https://yacy.net/en/index.html" target="_blank">YaCy Decentralized Web Search</a></p>
        </div>
        <div class="col-lg-4 col-sm-12">
            <h5 class="bold">Communication</h5>
            <p>Facing issues while setting up project on local environment? Our chat channel is on gitter here: <a href="https://gitter.im/fossasia/susper.com" target="_blank">fossasia/susper.com</a> . We'll be happy to help you out!'</p>    
        </div>
        <div class="col-lg-4 col-sm-12">
            <h5 class="bold">Contribute to our project</h5>
            <p>Get involved as an Open Source developer, designer or tester and start your adventure today! Solve an issue or feature request on our repositories with <a href="https://github.com/fossasia/susper.com" target="_blank">FOSSASIA</a>. Build up your developer profile and become part of a fantastic community.</p>
        </div>
    </div>
    <br>
</div>

index.component.html

<div class="container-fluid">
    <div class="starter-template">
        <h2 class="yacy">
            <img src="assets/images/susper.svg" alt="YaCy" id="biglogo" style="margin: auto;"></h2>
        <h2 class="yacy" id="greeting"></h2>
        <div id="set-susper-default">
            <h3>Set Susper as your default search engine on Mozilla!</h3>
            <ol>
                <!-- Start ignoring BootLintBear -->
                <li><button id="install-susper">Install susper</button></li>
                <li>Mark the checkbox to set Susper as your default search engine</li>
                <li>Start searching!</li>
            </ol>
            <button id="cancel-installation">Cancel</button>
        </div>
        <!-- Stop ignoring BootLintBear -->
        <div id="search-bar">
            <app-search-bar></app-search-bar>
        </div>
        <footer>
          <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>    
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a routerLink="/about" routerLinkActive="active">About Susper</a></li>
                </ul>
            </div>
          </nav>
        </footer>
  </div>

about.component.ts

import { Component, OnInit } from '@angular/core';
import { RouterModule, Router } from '@angular/router';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

在顶级条目页面中加载CSS文件，或者在SCSS文件中使用import CSS语句，或者将它们添加为指向index.html的链接。