Amgular安裝、外掛安裝、新建元件、元件編寫、雙向繫結、服務、ViewChild、元件間通訊、宣告週期函式、非同步程式設計、路由、模組化實現懶載入
安裝
npm install -g @angular/cli
檢視版本
ng v
建立專案
//在filedir中建立專案，並安裝依賴
ng new filedir
//在filedir中建立專案，不安裝依賴
ng new filedir --skip--install
//安裝依賴
npm install
SRC目錄
-app
app-routing.moodule.ts
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
-assets//存放靜態資源
-environments
environment.prod.ts
enviroment.ts
favicon.ico
index.html
main.ts
polyfills.ts
test.ts
專案中安裝外掛
1下載
npm install jquery --save//以jquery為例，bootstrap同理
執行該命令後，會將jquery安裝到node_modules中，並且會修改packge.json檔案，將"jquery"作為鍵，版本號作為值新增到denpencies屬性中
2將第三方庫引入到專案中
開啟angular.json檔案，將第三方庫的js路徑地址新增到"scripts"屬性下，將第三方庫的css路徑地址新增到"styles"屬性下
3讓ts檔案能識別外掛中的變數
npm install @types/jquery --save -dev//以jquery為例
4匯入
//在ts檢視檔案中匯入
import * as $ from "jquery"
/*css中匯入*/
@import "~bootstrap/dist/css/bootstrap.css";
新建元件
ng g component components/nvbar //在app中建立nvbar元件到components資料夾
執行命令後，將會在app中新建一個components資料夾，並將元件建立到該資料夾裡。同時，會修改app.module.ts檔案，匯入該元件，並在declartions屬性下欄位新增新生成的元件名
執行專案
ng serve
執行該命令後專案執行
元件結構
-nvbar//元件資料夾
nvbar.component.css
nvbar.component.html //html模板
nvbar.component.spec.ts
nvbar.component.ts //ts檢視
元件編寫
1繫結動態屬性
<span [innerHTML]='content'></span><!--content是檢視中宣告的變數-->
渲染後，span標籤裡會填充content的值
2迴圈
<ul>
<li *ngFor="let item of arr">{ {item} }</li><!--arr是檢視中定義的陣列-->
</ul>
渲染後，這裡將會迭代生成多個li標籤，每個li內將填充arr的一個元素
3判斷
<p>
<span *ngIf="flag">flag is true</span><!--檢視中flag值為true是渲染這個標籤-->
<span *ngIf="!flag">flag is false</span><!--檢視中flag值為false是渲染這個標籤-->
</p>
4switch...case...
<div [ngSwitch]="status">
<div *ngSwitchCase=1>status's value is 1</div><!--檢視中status的值是1，渲染這個標籤-->
<div *ngSwitchCase=2>status's value is 2</div>
<div *ngSwitchCase=3>status's value is 3</div>
<div *ngSwitchDefault>status's value is 0</div>
</div>
5動態樣式
<div [ngClass]="{'orange':true,'red':false}">www.zhanghuan.top</div>
<!--預先在css檔案中定義兩個class，orange和red，這裡會將傳入物件中屬性值為true的屬性作為class新增到該標籤中-->
<div [ngStyle]="{'color': 'red'}">www.zhanghuan.top</div>
<!--這裡直接改變該標籤的style屬性，此處為設定div的color為red-->
6管道
<div>{ {time|date:'yyyy-MM-dd hh:mm:ss'} }</div>
<!--檢視檔案中time:any=new Date()-->
7事件
1)點選事件
<!--點選事件-模板-->
<button (click)='run($event)'>執行事件</button><!--注意：要捕捉該事件，這裡的引數必須是$event-->
點選該按鈕後將會呼叫檢視中的run方法，$event是捕捉該事件並傳入run中。檢視裡需要定義run方法，並接收傳過來的引數，event.target將指向該按鈕物件
2）按鈕事件
<!--按鈕事件-模板-->
<input type="text" (keydown)="keydown($event)">
//檢視中部分程式碼
keydown(e:any){
if(e.keyCode==13){//如果點選回車，輸出input裡的值
console.log(e.target.value)
}
}
3）雙向資料繫結
(1)需要配置app.modules.ts
import {FormsModule} from '@angular/forms';//匯入該模組
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
FormsModule//這裡新增模組名
]
})
(2)具體程式碼
<!--雙向繫結-模板-->
<input type="text" [(ngModel)]="keywords"/>{{keywords}}
輸入文字框的內容將會賦值給keywords這個變數，keywords的值隨著輸入內容的改變而改變。注意：檢視函式中如果不宣告keywords這個變數，也不會報錯
表單中雙向繫結案例
1.模板
<div class="container">
<h1 class="text-center">人員登記系統</h1>
<div class="card">
<div class="card-body">
<form>
<!--文字框-->
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" [(ngModel)]="peopleinfo.name" name="name" id="name"><!--注意：不設定name屬性會報錯-->
</div>
<!--單選框-->
<p>性別</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="sex0" [(ngModel)]="peopleinfo.sex" name="sex" value="0">
<label class="form-check-label" for="sex0">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="sex1" [(ngModel)]="peopleinfo.sex" name="sex" value="1">
<label class="form-check-label" for="sex1">女</label>
</div>
<p></p>
<!--下拉選單-->
<p>城市</p>
<select class="form-control" name="city" [(ngModel)]="peopleinfo.city">
<option *ngFor="let item of citylist">{ {item} }</option>
</select>
<p></p>
<!--核取方塊-->
<p>愛好</p>
<div class="form-check form-check-inline" *ngFor="let item of peopleinfo.hobby;let key=index">
<input class="form-check-input" type="checkbox" name="hobby" [id]="'hobby'+key" [(ngModel)]="item.checked">
<label class="form-check-label" [for]="'hobby'+key">{ {item.title} }</label>
</div>
<p></p>
<!--大文字框-->
<div class="mb-3">
<label for="validationTextarea">備註</label>
<textarea class="form-control" id="validationTextarea" name="mark" required [(ngModel)]="peopleinfo.mark"></textarea>
</div>
</form>
</div>
</div>
</div>
{ {peopleinfo|json} }<!--以json形式展示物件-->
2.檢視中關鍵程式碼
public citylist:any[]=["上海","北京","廣州","深圳"]
public peopleinfo:any={
"name":"",
"sex":"0",
"city":"上海",
"hobby":[
{
"title":"吃飯",
"checked":false
},
{
"title":"睡覺",
"checked":false
},
{
"title":"敲程式碼",
"checked":false
}
],
"mark":""
}
搜尋歷史案例
1.模板
<div class="container">
<div class="card">
<div class="card-body">
<form class="form-inline">
<div class="form-group col-sm-9 col-xs-9 mx-sm-3 mb-2">
<label for="search" class="sr-only">search</label>
<input type="text" class="form-control col-sm-12" name="keywords" (keydown)="getkey($event)" [(ngModel)]="keywords" id="search">
</div>
<button type="submit" (click)="add_history()" class="btn btn-primary mb-2">搜尋</button>
</form>
<hr>
<!--迴圈search_his-->
<h3 *ngFor="let item of search_his"><span class="badge badge-light large">
{ {item} }
<button type="button" class="close" (click)="del(item)">
<span>×</span>
</button>
</span></h3>
</div>
</div>
</div>
2.檢視中關鍵程式碼
search_his:any[]=[]
keywords:string=""
getkey(e:any){
//監聽使用者鍵盤事件，如果輸入回車即向搜尋歷史中新增文字框中的關鍵字
if(e.keyCode==13){
this.add_history()
}
}
add_history(){
//向搜尋歷史search_his中新增文字框中的關鍵字
if(this.search_his.indexOf(this.keywords)==-1){//如果search_his中沒有當前搜尋的資料，則進行新增
this.search_his.push(this.keywords)
}
}
del(item:any){
//從搜尋歷史search_his中刪除item關鍵字
this.search_his.splice(this.search_his.indexOf(item),1)
}
任務列表案例
1.模板
<div class="container">
<div class="card">
<div class="card-header"><h3 class="text-center">toDoList</h3></div>
<div class="card-body">
<form>
<div class="form-group ">
<label for="search" class="sr-only">search</label>
<input type="text" class="form-control col-sm-12" placeholder="輸入後點選回車新增新任務" name="keywords" (keydown)="getkey($event)" [(ngModel)]="keywords" id="search">
</div>
</form>
<hr>
<p>進行中任務</p>
<div class="custom-control custom-checkbox" *ngFor="let item of task_list;let key=index" [hidden]="item.status==true">
<input type="checkbox" class="custom-control-input" [(ngModel)]="item.status" [id]="'task'+key">
<label class="custom-control-label" [for]="'task'+key">{ {item.name} }</label>
<button type="button" class="close" (click)="del(index)">
<span>×</span>
</button>
</div>
<hr>
<p>已完成任務</p>
<div class="custom-control custom-checkbox" *ngFor="let item of task_list;let key=index" [hidden]="item.status==false">
<input type="checkbox" class="custom-control-input" [(ngModel)]="item.status" [id]="'task'+key">
<label class="custom-control-label" [for]="'task'+key">{ {item.name} }</label>
<button type="button" class="close" (click)="del(index)">
<span>×</span>
</button>
</div>
</div>
</div>
</div>
2.檢視中關鍵程式碼
task_list:any[]=[]
keywords:string=""
getkey(e:any){
//監聽使用者鍵盤事件，如果輸入回車即向搜尋歷史中新增文字框中的關鍵字
if(e.keyCode==13){
this.add_task()
e.target.value=""
}
}
add_task(){
//向任務列表中新增文字框中的關鍵字
if(this.judge_task_in_list(this.keywords)){//如果任務列表中不存在該關鍵詞，則進行新增
this.task_list.push({"name":this.keywords,"status":false})
}
}
judge_task_in_list(key:any){
//判斷任務列表中是否已存在傳入的關鍵詞，不存在返回true
for(var i=0;i<this.task_list.length;i++){
if(this.task_list[i].name==key){
return false
}
}
return true
}
del(index:any){
//從任務列表中刪除item關鍵字
this.task_list.splice(index,1)
}
服務
Angular中公共資源的一種存在形式
1新建服務
ng g service services/storage //在app中建立storage服務到services資料夾
2app中配置服務
修改app.modules.ts檔案
//匯入服務
import {StorageService} from './services/storage.service'
//新增服務的類名到providers屬性
providers: [
StorageService
],
3檢視中使用服務
//匯入服務
import {StorageService} from '.././services/storage.service';
//元件類的構造方法傳入服務
constructor(public storage:StorageService){
//此時該類已自動新增屬性storage，用this.storage可呼叫服務
}
任務列表訊息持久化升級案例
1.模板
<div class="container">
<div class="card">
<div class="card-header"><h3 class="text-center">toDoList</h3></div>
<div class="card-body">
<form>
<div class="form-group ">
<label for="search" class="sr-only">search</label>
<input type="text" class="form-control col-sm-12" placeholder="輸入後點選回車新增新任務" name="keywords" (keydown)="getkey($event)" [(ngModel)]="keywords" id="search">
</div>
</form>
<hr>
<p>進行中任務</p>
<div class="custom-control custom-checkbox" *ngFor="let item of task_list;let key=index" [hidden]="item.status==true">
<input type="checkbox" class="custom-control-input" [(ngModel)]="item.status" (change)="update_to_local()" [id]="'task'+key"><!--較之前新增change事件-->
<label class="custom-control-label" [for]="'task'+key">{ {item.name} }</label>
<button type="button" class="close" (click)="del(index)">
<span>×</span>
</button>
</div>
<hr>
<p>已完成任務</p>
<div class="custom-control custom-checkbox" *ngFor="let item of task_list;let key=index" [hidden]="item.status==false">
<input type="checkbox" class="custom-control-input" [(ngModel)]="item.status" [id]="'task'+key">
<label class="custom-control-label" [for]="'task'+key">{ {item.name} }</label>
<button type="button" class="close" (click)="del(index)">
<span>×</span>
</button>
</div>
</div>
</div>
</div>
2.檢視中完整程式碼
import { Component, OnInit } from '@angular/core';
import {StorageService} from '.././services/storage.service';
@Component({
selector: 'app-nvbar',
templateUrl: './nvbar.component.html',
styleUrls: ['./nvbar.component.css']
})
export class NvbarComponent implements OnInit {
task_list:any[]=[]
keywords:string=""
constructor(public storage:StorageService){
//此時該類已自動新增屬性storage，用this.storage可呼叫服務
}
getkey(e:any){
//監聽使用者鍵盤事件，如果輸入回車即向搜尋歷史中新增文字框中的關鍵字
if(e.keyCode==13){
this.add_task()
e.target.value=""
}
}
add_task(){
//向任務列表中新增文字框中的關鍵字
if(this.judge_task_in_list(this.keywords)){//如果任務列表中不存在該關鍵詞，則進行新增
this.task_list.push({"name":this.keywords,"status":false})
this.update_to_local()
}
}
judge_task_in_list(key:any){
//判斷任務列表中是否已存在傳入的關鍵詞，不存在返回true
for(var i=0;i<this.task_list.length;i++){
if(this.task_list[i].name==key){
return false
}
}
return true
}
del(index:any){
//從任務列表中刪除item關鍵字
this.task_list.splice(index,1)
this.update_to_local()
}
update_to_local(){
//將任務列表更新到本地
this.storage.set("todolist",this.task_list)
}
ngOnInit() {
//當頁面重新整理時，會執行此方法
this.task_list=this.storage.get("todolist")
}
}
ViewChild獲取DOM節點
1檢視裡引入ViewChild
import { ViewChild } from '@angular/core';
2模板中的標籤繫結上id
<p #ibox>box</p><!--必須以此種方式寫id，否則無法識別-->
3檢視中裝飾類裡的屬性
@ViewChild('ibox',{static: false}) mybox:any
4在檢視的ngAfterViewInit函式中呼叫DOM節點
ngAfterViewInit():void{
//$("#box").css("color","red")
$(this.mybox.nativeElement).css("color","red")
}
5側邊欄隱藏案例
//style.css檔案
body{
overflow: hidden;
}
//aside.component.css檔案
#right{
background: black;
width:200px;
height:100%;
right:0;
top:0;
position: absolute;
transform: translate(0,0);
transition: all 0.5s;
}
<!--aside.component.html檔案-->
<aside id="right" #right></aside>
<button class="btn btn-info" (click)="showaside()">彈出</button>
<button class="btn btn-info" (click)="hideaside()">隱藏</button>
//aside.component.ts檢視中關鍵程式碼
import { ViewChild } from '@angular/core';
@ViewChild('right',{static:false}) aside:any
ngOnInit() {
//當頁面重新整理時，會執行此方法
}
showaside(){
$(this.aside.nativeElement).css("transform","translate(0,0)")
}
hideaside(){
$(this.aside.nativeElement).css("transform","translate(100%,0)")
}
父元件與子元件間的通訊
1父元件發訊息給子元件
子元件檢視
import { OnInit } from '@angular/core';
export class AsideComponent implements OnInit {
@Input() from_father:any//定義變數，從父元件接收資料
}
父元件模板
<app-aside [from_father]="the msg from father""></app-aside>
//父元件在模板透過定義動態屬性，向子元件傳送資料
2子元件發訊息給父元件
子元件檢視
import { Output,EventEmitter } from '@angular/core';
export class AsideComponent implements OnInit {
@Output() private outer=new EventEmitter()//定義訊息傳送器，將透過outer物件向父元件傳送資料
ngOnInit() {
this.outer.emit("我是子元件")//元件初始化完成後傳送資料給父元件
}
}
父元件模板
<app-aside (outer)="run($event)"></app-aside>
<!--這裡必須用outer事件(和子元件變數outer名命保持一致)觸發檢視內的方法來接收子元件傳過來的資料-->
生命週期函式
元件建立、更新、銷燬時觸發的一些列方法
ngOnInit和ngAfterViewInit的區別
ngOnInit() {
//元件和指令初始化完成執行，並不是真正的dom載入完成,請求資料操作放在這裡
}
ngAfterViewInit():void{
//檢視載入完成後觸發的方法，dom操作放在這裡
}
非同步程式設計的幾種方法
1回撥函式
2事件監聽、釋出訂閱
3Promise
4Rxjs，本質上就是第2中方法
example:
透過一個服務，模擬向服務端請求資料的非同步過程
1)服務的核心ts程式碼
import {Observable} from 'rxjs'//僅用於rxjs
export class RequestService {
//服務端請求資料後，這裡透過定時器延長資料傳送時間，模擬資料請求延遲
data:any=""
constructor() { }
//定義回撥函式非同步
get_callback_data(cb){
var t=setInterval(()=>{
this.data='data from callback'
window.clearInterval(t)//此句註釋會持續執行回撥函式，即每隔3秒將會傳送一次資訊
cb(this.data)
},3000)
}
//定義promise非同步
get_promise_data(){
return new Promise((resolve)=>{
var t=setInterval(()=>{
this.data='data from promise'
window.clearInterval(t)//此句註釋後效果一樣，即僅傳送一次資訊
resolve(this.data)
},3000)
})
}
//定義rxjs非同步
get_rxjs_data(){
return new Observable((observe)=>{
var t=setInterval(()=>{
this.data='data from rxjs'
observe.next(this.data)//每隔3秒將會傳送一次資訊
//observe.error("失敗時返回資料")
},3000)
})
}
}
2)元件模擬客戶端核心ts程式碼
export class AsideComponent implements OnInit {
ngOnInit() {
//回撥函式方式
this.request.get_callback_data((data)=>{
console.log(data)//data from callback
})
//promise方式
this.request.get_promise_data().then((data)=>{
console.log(data)//data from promise
})
//rxjs方式
var d=this.request.get_rxjs_data().subscribe((data)=>{
console.log(data)
})
//取消訂閱,將中途撤回訊息獲取
//d.unsubscribe()
}
}
Rxjs非同步總結
功能較promise強大，獲取訊息可中途撤回，獲取的訊息可以進行過濾
//訊息過濾功能演示
//get_rxjs_data()將會持續傳送0，1，2，3，4……
//這是ts檢視模擬客戶端獲取資料
import { filter,map } from 'rxjs/operators'
export class AsideComponent implements OnInit {
this.request.get_rxjs_data().pipe(
filter((value:any)=>{if(value%2==0){return true;}})
).subscribe((data)=>{
console.log(data)//輸出0，2，4，6……
})
}
請求資料
1配置app.modules.ts
//app.modules.ts檔案
//匯入
import { HttpClientModule } from '@angular/common/http'
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule//新增模組
],
providers: [],
bootstrap: [AppComponent]
})
2檢視函式中使用(無引數的get請求)
//匯入模組
import { HttpClient } from '@angular/common/http'
export class HomeComponent implements OnInit {
constructor(public http:HttpClient) { }//透過建構函式將新匯入模組傳入並賦值給http
ngOnInit() {
}
//呼叫該方法將會發出請求
getData(){
let api="http://a.itying.com/api/productlist"
this.http.get(api).subscribe((response)=>{
console.log(response)//輸出請求的資料
})
}
}
3帶引數的post請求
import { HttpClient } from '@angular/common/http'
import { HttpHeaders } from '@angular/common/http'//請求頭模組
export class HomeComponent implements OnInit {
constructor(public http:HttpClient) { }
ngOnInit() {
}
dologin(){
const httpoptions={
headers:new HttpHeaders({'ContentType':"aplication/json"})//設定請求頭
}
let api="121.0.0.1:3000/login"
this.http.post(api,{"username":"zhanghuan","password":"123456"},httpoptions).subscribe((response)=>{
console.log(response)
})
}
}
4使用jsonp跨域
1)在app.module.ts裡把jsonp模組匯入並配置
import { HttpClientModule } from '@angular/common/http'
import { HttpClientJsonpModule } from '@angular/common/http'
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,//新增模組
HttpClientJsonpModule//新增模組
],
providers: [],
bootstrap: [AppComponent]
})
2)在檢視檔案中使用
//關鍵程式碼
get_jsonp_data(){
let api="https://sug.so.360.cn/suggest?"
this.http.jsonp(api,"callback").subscribe((response)=>{
console.log(response)
})
}
5axios獲取資料
angular預設安裝了此模組，如果未安裝執行npmn install axios --save
//關鍵程式碼
import axios from 'axios'
get_axiod_data(){
let api="http://a.itying.com/api/productlist"
axios.get(api).then((response)=>{
console.log(response)
})
}
路由
路由就是根據不同的url地址，動態讓根元件掛載其他元件來實現一個單頁面應用
1配置路由
//app-routing.module.ts
//關鍵程式碼
const routes: Routes = [
{path:"home",component:HomeComponent},
{path:'content',component:ContentComponent},
{path:'**',component:HomeComponent},//這個必須放最下面，其下面的路由都匹配不到
];
2模板
<a href="" [routerLink]="['/home']" routerLinkActive="text-info" >首頁</a>
<a href="" [routerLink]="['/content']" routerLinkActive="text-info" >詳情</a>
<a href="" [routerLink]="['/about']" routerLinkActive="text-info" >關於</a>
<!--以上a標籤點選後不會重新整理網頁，routerLinkActive屬性為點選後給該標籤加上對應的text-info類，移除其他標籤的text-info類-->
<a href="/about">關於</a><!--這是傳統a標籤會重新整理網頁-->
3a標籤進行get方式傳值
<!--模板-->
<a href="" [routerLink]="['/about']" routerLinkActive="text-info" [queryParams]="{name:'zhanghuan'}">關於</a>
<!--queryParams動態屬性賦值引數物件-->
//about對應的檢視
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'//匯入
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
constructor(public route:ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe((data)=>{
console.log(data)//輸出 {name: "zhanghuan"}
})
}
}
4動態路由
1)路由
//路由
const routes: Routes = [
{path:'content/:aid',component:ContentComponent},//aid接收引數
];
2)模板
<!--模板-->
<a href="" [routerLink]="['/content',1]" routerLinkActive="text-info" >詳情</a>
3)views檔案
//content的views檔案
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'//匯入
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {
constructor(public router:ActivatedRoute) { }
ngOnInit() {
this.router.params.subscribe((data)=>{
console.log(data)//輸出 {aid: "1"}
})
}
}
5js跳轉
1)路由
const routes: Routes = [
{path:"home",component:HomeComponent},
{path:'content/:aid',component:ContentComponent},
{path:'about',component:AboutComponent},
{path:'**',redirectTo:"home"},//這個必須放最下面，其下面的路由都匹配不到
];
2)模板
<button class="btn btn-info" (click)="skip_home()">js方式跳轉home</button>
<button class="btn btn-info" (click)="skip_content()">js方式跳轉content</button>
<button class="btn btn-info" (click)="skip_about()">js方式跳轉about</button>
3)views檔案
import { Component } from '@angular/core';
import { Router } from '@angular/router'//匯入
import { NavigationExtras } from '@angular/router'//匯入
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angulardemo02';
constructor(public router:Router){}
skip_home(){//簡單跳轉
this.router.navigate(['home'])
}
skip_content(){//動態路由傳值跳轉
this.router.navigate(['content',1])
}
skip_about(){//get方式跳轉傳值
let queryParams:NavigationExtras={
queryParams:{"name":"zhanghuan"}
}
this.router.navigate(['about'],queryParams)
}
}
6二級路由
1)路由檔案
const routes: Routes = [
{path:'home',component:HomeComponent},
{path:'product',component:ProductComponent,
children:[
{path:'class_manage',component:ClassifiedManagementComponent},
{path:'commodity',component:CommondityManagementComponent},
{path:'**',redirectTo:"class_manage"}
]
},
{path:'**',redirectTo:"home"}
];
2)product元件的檢視核心程式碼
export class ProductComponent implements OnInit {
mlist:any[]=[
{"title":"分類管理","url":"class_manage"},
{"title":"商品列表","url":"commodity"}
]
constructor() { }
ngOnInit() {
}
}
3)product元件的模板
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="height: 100%;">
<div class="card" >
<div class="card-body">
<div class="list-group" *ngFor="let item of mlist">
<a class="list-group-item list-group-item-action" [routerLink]="[item.url]" routerLinkActive="active" >{ {item.title} }</a>
</div>
<p></p>
</div>
</div>
</div>
<!-- 左側導航 -->
<div class="col-md-9">
<div class="card">
<div class="card-body">
<router-outlet></router-outlet>
<!-- 二級路由對應的元件將渲染在router-outlet裡 -->
</div>
</div>
</div>
<!-- 右側主體 -->
</div>
</div>
模組化實現懶載入
元件較多導致載入慢，將元件模組化使得初始化更快
1建立模組
ng g module modules/user --routing
將會建立一個modules資料夾，裡面包含一個user資料夾，此資料夾內包含兩個檔案，分別為user-routing.module.ts，user.module.ts
2建立根元件
ng g component modules/user
將會在modules/user裡建立四個檔案，分別是user.component.ts，user.component.spec.ts，user.component.html，user.component.css
3透過路由跳轉到對應模組
1）一級路由設定
//app-routing.module.ts核心程式碼
const routes: Routes = [
{path:'user',loadChildren:'./modules/user/user.module#UserModule'},
{path:'product',loadChildren:'./modules/product/product.module#ProductModule'},
{path:'**',redirectTo:'user'},
];
2）二級路由設定
//product-routing.module.ts核心程式碼
const routes: Routes = [
{path:"",component:ProductComponent}
];
4在模組外部訪問模組內的元件
1）配置模組的module.ts檔案
//模組的module.ts檔案，如user.module.ts，這裡僅僅是核心程式碼
@NgModule({
declarations: [UserComponent, ProfileComponent, AdressComponent, OrderComponent],
exports:[AdressComponent],//將想要外部訪問的元件進行暴露
imports: [
CommonModule,
UserRoutingModule
]
})
2）在app.module.ts檔案中進行配置
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { UserModule } from './modules/user/user.module';//外部模組匯入
import { ProductModule } from './modules/product/product.module';//外部模組匯入
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ProductModule,//外部模組匯入
UserModule,//外部模組匯入
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }