Angular9入門（2）

製作一個簡易的新聞發佈頁面

完成後的效果如下圖所示：

 

1、新建一個angular應用

ng new angular9-reddit

2、添加css，案例的樣式採用的是semantic ui。具體用法可以參考下面的網站，別參考那本書。

網站：https://1.semantic-ui.com/

  <link rel="stylesheet" type="text/css" href="/assets/js/semantic.min.css">
  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
  <script src='/assets/js/semantic.min.js'></script>

這裏下載對應的文件放在資源目錄下，然後把鏈接放在首頁的html模板中。這章css不重要，素顏也沒事，只要能實現功能。

3、app.component.ts

import { Component } from '@angular/core';
import { Article } from './article/article.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular9-reddit';
  articles: Article[]
  constructor(){
    this.articles = [
      new Article('天龍八部','http://tianlong.com',10),
      new Article('武林外傳','http://wulin.com',11),
      new Article('少年歌行','http://shaonian.com',18),
    ]
  }
  addArticle(title:HTMLInputElement,link:HTMLInputElement){
    if(title.value === ""){
      return false;
    }
    this.articles.push(new Article(title.value,link.value,0));
    title.value = ''
    link.value = ''
    return false
  }
  sorteArticles():Article[]{
    return this.articles.sort((a:Article,b:Article)=>b.votes -a.votes);
  }
}

4、app.compoent.html

<form class="ui large form segment">
  <h3 class="ui header">添加一個鏈接</h3>
  <div class="field">
    <label for="title">標題：</label>
    <input name="title" #newtitle>
  </div>
  <div class="field">
    <label for="link">鏈接：</label>
    <input name="link" #newlink>
  </div>
  <button (click)="addArticle(newtitle,newlink)" 
  class="ui positive right flated button">提交鏈接</button>
</form>

<div class="ui grid posts">
  <app-article
    *ngFor="let article of sorteArticles();let iid = index"
    [article] = "article" [iid] = "iid">
  </app-article>
</div>

5、添加文章組件

ng generate component article

6、article.component.ts

import { Component, OnInit, Input } from '@angular/core';
import {Article} from './article.model'

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
  host:{
    class:'row'
  }
})
export class ArticleComponent implements OnInit {
  @Input() article:Article
  @Input() iid:number
  voteUp(){
    this.article.votes += 1;
    return false
  }
  voteDown(){
    this.article.votes -= 1;
    return false
  }  
  ngOnInit(): void {

  } 
}

7、article.component.html

<div class="four wide column center aligned votes">
    <div class="ui statistic">
        <div class="value">
            {{article.votes}}
        </div>
        <div class="label">
            票數
        </div>
    </div>
</div>
<div class="twelve wide column">
    <a class="ui large header" href="{{article.link}}">
        {{article.title}}
    </a>
    <div class="meta">{{article.domain()}}</div>
    <ul class="ui big horizontal list voters">
        <li class="item">
            <a href (click)="voteUp()">
                <i class='arrow up icon'></i>
                贊
            </a>
        </li>
        <li class="item">
            <a href (click)="voteDown()">
                <i class='arrow down icon'></i>
                踩
            </a>
        </li>
    </ul>
</div>

8、article.model.ts

export class Article {
    votes: number
    title: string
    link: string
    constructor(title:string,link:string,votes?:number) {
        this.title = title
        this.link = link
        this.votes = votes || 0
    }
    domain():string{
        try{
            const link :string = this.link.split('//')[1];
            return link.split('/')[0]
        } catch (err){
            return null
        }
    }
}

9、完成。