ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2-8 대시보드에 주요 영웅목록 만들기
    앵귤러/01 퀵스타트 & 튜토리얼 2017. 8. 6. 10:18

    대시보드에 주요 영웅목록 만들기

    영웅 목록 중 최초 4명의 영웅을 표시하는 대시보드를 만들어 보자

    컴포넌트에서 템플릿에 HTML내용을 표시하였는데, 별도의 html파일로 분리할 수 있다.

    템플릿 html파일은 다음과 같다.

    src/app/dashboard.component.ts

    import { Component, OnInit } from '@angular/core';

    import { Hero } from './hero'

    import { HeroService } from './hero.service';

     

    @Component({

      selector: 'my-dashboard',

      templateUrl: './dashboard.component.html'

    })

    export class DashboardComponent implements OnInit {

     

      ngOnInit() {

      }

     

    }

     

    src/app/dashboard.component.html

    <h3>최고 영웅들</h3>

    <div class="grid grid-pad">

        <a *ngFor="let hero of heroes" class="col-1-4">

            <div class="module hero">

                <h4>{{hero.name}}</h4>

            </div>

        </a>

    </div>

    *ngFor는 영웅 이름을 반복해서 표시하기 위해 사용된다.

     

    대시보드 컴포넌트에서 HeroService를 공유해서 사용해서 최고 영웅들을 표시하자.

    HeroServiceAppModule providers에 선언하여 모든 컴포넌트의 싱글톤 인슨턴스로 생성되어 사용될 수 있다.

     

    대시보드 컴포넌트를 수정해 보자.

    src/app/dashboard.component.ts

    import { Component, OnInit } from '@angular/core';

    import { Hero } from './hero'

    import { HeroService } from './hero.service';

     

    @Component({

      selector: 'my-dashboard',

      templateUrl: './dashboard.component.html'

    })

    export class DashboardComponent implements OnInit {

      heroes: Hero[] = [];

     

      constructor(private heroService: HeroService){}

     

      ngOnInit() {

        this.heroService.getHeroes()

        .then(heroes => this.heroes = heroes.slice(1,5));

      }

     

    }

    heroes 배열 속성을 정의

    생성자에서 heroServiceHeroService를 주입

    앵귤러에서 제공하는 noOnInit()라이브사이클 초기화 메소드에서 영웅들을 가져오도록 서비스 호출

    Array.slice(1, 5) 메소드는 2번째 값부터 5번째 값까지 표시한다.

    여기까지 구현 후 실행해 .보면 4명의 영웅이 대시보드에 나타난다.


    댓글

Designed by Tistory.