我正在尝试将index.component.html(主页(路由到about.component.html(about页面(。但是,路由工作正常。但是当我从主页重定向到关于页面时,关于页面的设计受到干扰。我已经包含了源代码。
关于组件.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>
关于.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() {
}
}
在顶级入口页中加载 CSS 文件,在 SCSS 文件中使用 import CSS 语句或将它们添加为索引.html的链接。