建立Module且更新app.module.ts
ng g m news --module=app
到news module資料夾
cd src\app\news
建立component
ng g c news-list --module=news
修改news.module.ts加入exports
@NgModule({
declarations: [
NewslistComponent
],
imports: [
CommonModule
],
exports:[NewslistComponent]
})
建立list底下的component
ng g c news-head --module=news
ng g c news-body --module=news
news-list html部分
<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
<app-news-head [item]="item"></app-news-head>
<app-news-body [item]="item"></app-news-body>
</div>
news-list ts部分
data = [
{
"id": 1,
"href": "http://www.golgle.com.tw",
"title": "Google",
"Content": "Google是總部位於美國加州山景城的跨國科技公司，為Alphabet的子公司，業務範圍涵蓋網際網路廣告、網際網路搜尋、雲端運算等領域，開發並提供大量基於網際網路的產品與服務，其主要利潤來自Ads等廣告服
",
"href-s": "https://www.google.com.tw"
},
{
"id": 2,
"href": "http://tw.yahoo.com",
"title": "雅虎",
"Content": "Yahoo奇摩是台灣入口網站之一，由「香港商雅虎資訊股份有限公司台灣分公司」代表營運。該網站於2001年10月雅虎台灣與奇摩站合併後成立，網址續用雅虎台灣的「tw.yahoo.com」
",
"href-s": "https://tw.yahoo.com",
},
{
"id": 3,
"href": "http://www.microsoft.com/zh-tw",
"title": "微軟",
"Content": "微軟是美國的一家跨國電腦科技公司，公司於1975年由比爾·蓋茲與保羅·艾倫創立，以研發、製造、授權及提供廣泛的電腦軟體服務為主。坐標為47.642229°N 122.136934°W
",
"href-s": "https://www.microsoft.com/zh-tw",
}
];
news-head html部分
<div>
<a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
<a [href]="item['href-s']">{{ item.title}}-s</a>
</div>
news-head ts部分，@Input()重點
import { Component, OnInit ,Input} from '@angular/core';
@Component({
selector: 'app-news-head',
templateUrl: './news-head.component.html',
styleUrls: ['./news-head.component.css']
})
export class NewsHeadComponent implements OnInit {
@Input()
item: any;
constructor() { }
ngOnInit(): void {
}
}
news-body html部分
<div>
<div [innerHTML]="item.Content">
</div>
<pre>
{{item.Content|json}}
</pre>
</div>
news-body ts部分，@Input()重點
import { Component, OnInit ,Input} from '@angular/core';
@Component({
selector: 'app-news-body',
templateUrl: './news-body.component.html',
styleUrls: ['./news-body.component.css']
})
export class NewsBodyComponent implements OnInit {
@Input()
item: any;
constructor() { }
ngOnInit(): void {
}
}
參考資料
1.保哥的
Angular 開發實戰：從零開始
2.
Angular官網
