Angular 4 학습 노트 의 바 인 딩 과 하 도 급 실현

본 고 는 Angular 4 학습 노트 의 실현 바 인 딩 과 하 도 급 을 소개 하여 여러분 께 도움 이 되 기 를 바 랍 니 다.
src 디 렉 터 리 에 있 는 app/app.coponent.ts 파일 은 표준 angular 4 구성 요소 의 구조 입 니 다.

위@component()괄호 안에 template 속성 에'(이 기 호 는 작은 따옴표 가 아니 라 키보드 1 왼쪽,tab 키 위의 그 기호)로 감 싼 것 은 View 이 고 아래 export 의 class 부분 은 Controller 입 니 다.
실현 되 기 를 바 라 는 효과 가 이렇게 생 겼 다.

만리 장정 의 첫걸음,뷰 수정 부터.
temlate 의 HTML 파일 을 다음 모양 으로 변경 합 니 다.

<h1>Hello,World</h1>
<p>  ,gundam meister</p>
<span>    </span>
<div>
  <span>    </span>
  <span>NewType</span>
</div>

위의 부분 은 먼저 프로젝트 소개 역할 을 한다.
가운데 span 은 높 은 목록 인 척 합 니 다.
아래 div 패키지 의 두 span 은 상세 한 상황 에 도달 하 는 척 합 니 다.
페이지 새로 고침,지금 은 이 모양 입 니 다:

좋 습 니 다.효과 도 에 비해 조금 좌절 되 었 다 는 것 을 인정 하지만 지금 은 기능 실현 에 전념 하고 있 습 니 다.
실현 해 야 할 기능 은 높 은 목록 을 클릭 하면 높 은 정 보 를 표시 할 수 있 습 니 다.
정상 적 인 상황 에 서 는 당연히 상수 로 페이지 를 렌 더 링 하지 않 는 다.컨트롤 러 와 View 를 어떻게 소통 하 는 지 는 Angular 가 Model 로 하 는 일 입 니 다.바 인 딩 입 니 다.
귀속:당신 은 있 고 나 는 있 습 니 다.모두 있 습 니 다.
같은 구성 요소(component)에서 class(Controller)에서 정 의 된 변수 이름 은 template(View)에서 직접 사용 할 수 있 습 니 다.

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello,World</h1>
  <p>  ,gundam meister</p>
  <span>{{name}}</span>
  <div>
    <span>{{name}}</span>
    <span>{{type}}</span>
  </div>
  `
})
export class AppComponent {
  name = '    ';
  type = 'NewType';
}

페이지 새로 고침,여전히 표시 가능:

물론 gundam 은 같은 부류 이기 때문에 지금 은 model 이 등장 할 때 입 니 다.
클래스 gundam 정의:

class Gundam {
  name: string;
  type: string;
}

name 과 type 을 바 꾸 어 string 상수 가 아 닌 속성 값 으로 만 듭 니 다.

gundam: Gundam = {
  name: '  ',
  type: 'NewType'
};

type:script 의 문법 이 좀 이상 합 니 다.특정한 변 수 를 특정한 유형의 쓰기 로 정의 하 는 것 은 변수 이름 이 앞 변수 유형 이 뒤에 있 는 것 입 니 다.
temple 의 인용 변경:

<h1>Hello,World</h1>
<p>  ,gundam meister</p>
<span>{{gundam.name}}</span>
<div>
  <span>{{gundam.name}}</span>
  <span>{{gundam.type}}</span>
</div>

페이지 새로 고침:

리 뷰 코드 계속.
홈 페이지 는 gundam 목록 이 아 닌 gundam 목록 을 보 여 주 므 로 하나의 gundam 배열 로 데 이 터 를 사칭 합 니 다.

const gundams: Gundam[] = [
  {name: '    ', type: 'NewType'},
  {name: '    ', type: '  '},
  {name: '   ', type: '  '}
];

이전의 angular 는 ng-repeat 라벨 을 제공 하여 목록 을 순환 시 켰 으 나,현재 4.0 이상 의 시 대 는 라벨 에 있 는 특수 한 수식 이 되 었 습 니 다:*ngFor.
class 의 코드 를 수정 하고 변수 gundams 수용 배열 을 정의 합 니 다.

gundams = GUNDAMS;

template 를 수정 하고*ngFor 로 배열 을 순환 적 으로 분석 하여 데이터 렌 더 링 을 진행 합 니 다.

<h1>Hello,World</h1>
<p>  ,gundam meister</p>
<div *ngFor="let gundam of gundams">
  <span>
    {{gundam.name}}
  </span>
</div>
<div>
  <span>{{gundam.name}}</span>
  <span>{{gundam.type}}</span>
</div>

페이지 새로 고침:

목록 은 이미 데이터 에 따라 변화 되 었 습 니 다(물론 데이터 흐름 은 논의 가 필요 합 니 다).다음은 클릭 한 목록 항목 에 따라 상세 한 상황 을 변경 할 수 있 습 니 다.
html 태그 마다 이벤트(click hover 등)가 있 고,angular 도 이 이벤트 들 을 계속 호출 했 습 니 다.쓰기 만 다 릅 니 다.

<div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">

설명:클 라 스 의 onSelected 방법 을 터치 하고 gundam 을 매개 변수 로 전달 합 니 다.
View 에 사용 되 는 onSected 함 수 는 controller,즉 class 에서 왔 기 때문에 보충 이 필요 합 니 다.

selectedGundam: Gundam; //     selectedGudam         
onSelected (gundam: Gundam) : void{
  this.selectedGundam = gundam; //       
}

template 의 html 디 스 플레이 수정:

<div>
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

이 때 페이지 를 새로 고침 하면 오류 가 발생 합 니 다.div 를 누 르 면 selected Gudam 에 값 을 부여 할 수 있 지만 selected Gundam 이 초기 화 될 때 값 이 없습니다.
두 가지 해결 방법 이 있다.
첫 번 째 는 selected 에 초기 값 을 설정 하고 선택 한 div 를 설정 하 는 것 입 니 다.
다른 하 나 는 selected 가 초기 화 되 었 는 지 여부 에 따라 자세 한 내용 을 표시 하지 않 는 div 를 표시 하기 로 결정 합 니 다.
angular 가 ngIf 수식 을 제공 하기 때문에 두 번 째 방법 을 사용 하 는 것 이 비교적 편리 합 니 다.

<div *ngIf="selectedGundam">
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

페이지 새로 고침
 
클릭 바 토스

전체적으로 말 하면 여기까지 의 업무 논 리 는 이미 절반,심지어 더 많이 완성 되 었 다.자체 항목 은 클릭 하여 보 는 단일 페이지 애플 리 케 이 션 이기 때문에 복잡 하지 않 습 니 다.그러나 모든 코드 가 한 종류 에 몰 려 있어 가 독성 과 확장 성 이 떨어진다.
그 러 니까 다음 단 계 를 시작 할 때 가 됐어.
하 도 급 의 정수:뜯 기.

import {
Component
} from '@angular/core';
class Gundam {
  name: string;
  type: string;
}
const GUNDAMS: Gundam[] = [
  {name: '    ', type: 'NewType'},
  {name: '    ', type: '  '},
  {name: '   ', type: '  '}
];
@Component({
  selector: 'my-app',
  template: `
    <h1>Hello,World</h1>
    <p>  ,gundam meister</p>
    <div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">
      <span>
      {{gundam.name}}
      </span>
    </div>
    <div *ngIf="selectedGundam">
      <span>{{selectedGundam.name}}</span>
      <span>{{selectedGundam.type}}</span>
    </div>
  `
})
export class AppComponent {
  gundam: Gundam = {
  name: '  ',
  type: 'NewType'
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; //     selectedGudam         
  onSelected (gundam: Gundam): void {
  this.selectedGundam = gundam; //       
  }
}

현재 component 는 데이터,상수,template,class 가 있 는 것 을 너무 많이 짰 습 니 다.프로젝트 가 작 으 면(예 를 들 어 이 demo)받 아들 일 수 있 지만,업무 논리 가 번 거 로 워 지면 totally disaster 입 니 다.
남 을 속 이 는 것 은 개의 치 않 더 라 도 오 랜 만 에 지 키 러 가 는 자신 에 게 폐 를 끼 치지 마라.
먼저 건 담 이라는 클 라 스 를 떼 어 내 고 모델 이 니까 모델 에 잘 있어.
src 에서 model 가방 을 새로 만 들 고,gundam.ts 파일 을 새로 만 들 고,gundam class 를 ctrl+x 에 보 냅 니 다.

원래 위치 에서 가 져 오기:

import { Gundam } from '../../model/gundam';

다시 배열 의 상수 를 옮 기 면 이론 적 으로 데 이 터 는 서버 에서 찾 아야 하지만 나 는 서버 를 쓴 지 여러 해 가 되 었 기 때문에 가짜 데 이 터 를 계속 사용 해 야 한다.
src 새 패키지 서비스,새 data.ts 파일,gundam 클래스 를 가 져 온 후 그룹 내 보 내기:

import { Gundam } from './../model/gundam';
export const GUNDAMS: Gundam[] = [
  {name: '    ', type: 'NewType'},
  {name: '    ', type: '  '},
  {name: '   ', type: '  '}
];

원래 위치 에 도입 하여 사용:

import { GUNDAMS } from './../../service/data';

ps:모든 파일 뒤에 한 줄 을 비 우 는 것 을 잊 지 마 세 요.비어 있 지 않 으 면 정상적으로 실행 할 수 있 지만 오류 알림 이 있 을 수 있 습 니 다.전체적으로 말 하면 이러한 형식 요구 입 니 다.
이 때 정상적으로 표시 할 수 있 고 app.coponent.ts 에 서 는 훨씬 깨끗 해 졌 습 니 다.
하지만 아직 부족 하 다.이제 자세 한 내용 을 분리 해 야 한다.하나님 을 하나님 으로,카 이 저 를 카 이 저 로.홈 페이지 는 홈 페이지 데 이 터 를 처리 하고 자세 한 정 보 는 상세 한 데 이 터 를 처리 합 니 다.
첫 페이지 를 두 페이지 로 나 누 는 것 이다.첫 페이지+자세 한 내용 이다.
필요 한 게 route 야.
PS,관련 귀속:
Angular 의 바 인 딩 은 매우 재 미 있 습 니 다.양 방향 도 있 고 단 방향 도 있 습 니 다.class 에서 하나의 변 수 를 template 에서 사용 하 는 것 도 있 고 template 에서 하나의 class 의 변 수 를 외부 에 노출 시 켜 값 을 부여 하 는 것 도 있 습 니 다.현재 내 가 본 것 은 다음 과 같은 세 가지 표기 법 이다.
1){{변수 이름},한 항목 으로 연결 되 어 있 으 며,class 의 값 은 view 에 표 시 됩 니 다.
2)[변수 명],단일 항목 바 인 딩,보통 뒤에'='을 따라 클 라 스 의 변수 나 속성 에 값 을 부여 합 니 다.
3)*ngModel=[(변수 명)],양 방향 연결.양 방향 바 인 딩 에 대해 저 는 잘 모 르 겠 습 니 다.공식 문서 에서 도 폼 처리 에 만 적 용 됩 니 다.대체로 양 방향 바 인 딩 은 바 인 딩 값 후 페이지 에서 값 을 수정 하면 클 라 스 내 값 에 영향 을 줄 수 있 고 클 라 스 내 값 이 바 뀌 면 view 의 값 도 달라 집 니 다.
예 를 들 어 input 를 양 방향 으로 연결 할 수 있 습 니 다.초기 화 할 때 서버 에서 값 을 읽 어 넣 는 동시에 이 값 은 수정 할 수 있 습 니 다.클 라 스 의 값 도 바 뀌 었 습 니 다.value 를 가 져 오 는 절 차 를 쓰 지 않 고 직접 제출 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.