Angular 2-탐색

Angular 2에서는 수동 탐색을 수행 할 수도 있습니다. 다음은 단계입니다.

Step 1 − Inventory.component.ts 파일에 다음 코드를 추가합니다.

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

위의 프로그램에 대해 다음 사항에 유의해야합니다.

• 클릭 이벤트에 태그가 지정된 onBack 함수가있는 html 태그를 선언하십시오. 따라서 사용자가 이것을 클릭하면 제품 페이지로 다시 돌아갑니다.

• onBack 기능에서 router.navigate를 사용하여 필요한 페이지로 이동하십시오.

Step 2− 이제 모든 코드를 저장하고 npm을 사용하여 응용 프로그램을 실행합니다. 브라우저로 이동하면 다음 출력이 표시됩니다.

Step 3 − 인벤토리 링크를 클릭합니다.

Step 4 − '제품으로 돌아 가기'링크를 클릭하면 제품 페이지로 돌아가는 다음 출력이 표시됩니다.