javascript - AngularJS 中的页面路由扰乱了设计

Question

我正在尝试将index.component.html(主页)路由到about.component.html(关于页面)。然而，路由工作得很好。但是，当我从主页重定向到关于页面时，关于页面的设计受到干扰。我已经包含了源代码。

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 的链接。