동적 페이지 내용 변경

안녕하세요, mucun입니다.
이번 기사는 동적 페이지 내용의 변경에 관한 것입니다.

전회 기사( 그 10 )에서, 정적·동적의 차이에 대해서 접해,
정적 페이지 내용의 변경을 실시해 보았습니다.
이번에는 동적 페이지 내용의 변경입니다.
최선을 다합시다!

반복하지만, 동적인 내용이란 조건에 따라 전환되는 내용입니다.
예를 들면, 등록제의 페이지에서의 「환영, ○○씨」라고 하는 메세지입니다.
「○○씨」는 유저명칭마다 바뀝니다.
즉, 로그인 사용자라는 조건에 따라 전환되는 이유입니다.
이번 테스트에서도, 그 「환영, ○○씨」의 메시지 표시를 해 봅시다.

먼저 템플릿을 만듭니다.
「○○」부분 이외는 직접 쓰기로 메시지를 쓰고, 「○○」부분은 변수로 합니다.

소스는 이전에 사용한 것과 동일한 소스를 사용합니다.
(※( 그 4 에서 취득·변경하고 그 10 로 더욱 변경한 것)
편집기에서 "("ionic2"폴더)/app/hello-ionic.html"을 엽니다.


그런 다음 아래 코드를 마지막 행(이라고 쓰여진 행) 위에 삽입합니다.

추가 코드

<ion-card>

  <ion-card-content>
    ようこそ、{{user_name}}さん！
  </ion-card-content>

</ion-card>

수정 후 소스


html 수정 다음은 "("ionic2"폴더)/app/hello-ionic.ts"를 엽니다.


현재는 필요 최소한의 표기라는 느낌입니다.
여기에서 다음 코드 변경을 수행합니다.

수정 전(7~11행째)

export class HelloIonicPage {
  constructor(){

  }
}

　↓ 변경

수정 후(7~13행째)

export class HelloIonicPage {
  public user_name;

  constructor(){
    this.user_name = "○○";
  }
}

수정 후 소스


이 상태에서 「ionic serve」를 실시하고 있는 브라우저를 보면,
"typescript"에서 설정한 값이 "html"로 전달되어 표시됩니다.


위의 출력 템플릿이 만들어졌습니다.
나중에 조건을 추가합시다.

화면에 상황을 변경하는 버튼을 만듭니다.
"( "ionic2"폴더)/app/hello-ionic.html"
마지막 행(이라고 쓰여진 행) 위에 다음 코드를 삽입합니다.

추가 코드

<button (click)="userChange('田中')">私は、田中です</button>
<button (click)="userChange('マイケル')">私は、マイケルです</button>
<button (click)="userChange('張')">私は、張です</button>

수정 후 소스


그런 다음 "( "ionic2"폴더)/app/hello-ionic.ts"에,
다음 코드 변경을 수행합니다.

수정 후(7~13행째)

export class HelloIonicPage {
  public user_name;

  constructor(){
    this.user_name = "○○";
  }
}

　↓ 변경

수정 후(7~17행째)

export class HelloIonicPage {
  public user_name;

  constructor(){
    this.user_name = "○○";
  }

  userChange(new_user_name){
    this.user_name = new_user_name;
  }
}

수정 후 소스


처리 알고리즘은 버튼을 눌러 템플릿의 변수에,
「다나카」 「마이클」 「장」중 하나가 설정된다는 것입니다.
실제로 움직여 보면 잘 설정되어 있습니다.


이것은 동적 페이지 내용의 변경입니다.
소중한 문장이므로, 여기는 확실히 눌러 둡시다.

이상, 이번 기사는 여기까지가 됩니다.
읽어 주신 분, 감사합니다. <(_ _)>

👈【그의 10・정적인 페이지 내용을 변경한다】 👉【그의 12·서버의 PHP와 제휴한다】