javascript - Angular 2 @Input() 装饰器 : use from typescript

Question

我在 Ionic2/Angular2 项目中以这种方式构建了一个菜单:

@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {

   public appRoot;
   public menuPages;

   constructor(
      public navCtrl: NavController,
      public modalCtrl: ModalController
   ){
      //Initialize root page
      this.appRoot = StreamPage;

      //Declare pages for menu items
      this.menuPages = [
         {
            page: StreamPage,
            name: "Home",
            icon: "home"
         },
         // more pages

   menuOpenPage(page){
       if(page === 0){
           this.chatsModal();
       }else{
            this.appRoot = page;
       }  
   }

该页面在同一 menu.html 文件中的以下导航组件中呈现:

<ion-nav id="mainNav" #content [root]="appRoot"></ion-nav>

...因此，当我想打开页面时，我从 menu.html 调用“menuOpenPage(page)”函数，并将页面作为参数传递。事实上，它工作得很好，但现在我正在为个人资料构建一个页面，我还想通过 @Input() 装饰器传递一些数据来确定我将看到哪个用户的个人资料。

即:我想在单击侧菜单顶部的图像时打开我的个人资料，因此我调用 menuOpenPage(Profile)，不知何故，我传递“currentUser”作为参数。其他示例:我点击其他人的个人资料，所以现在我将他的 objectId 作为参数传递，以获取他的数据并能够看到它。

好吧，我只是不知道如何做到这一点。我知道如何从 HTML 中做到这一点，但是...我如何从 Typescript 中使用这个装饰器？

Answer 1

在这种情况下，我会考虑使用依赖注入(inject)。 具体来说，我将定义服务类(即带有 @Injectable 装饰器的类)，用于存储我想要在应用程序的不同部分共享的数据并配置 DI，以便此类类的实例实际上在 HomePage 组件和实际负责检索或构建配置文件的组件。

参见https://angular.io/docs/ts/latest/cookbook/component-communication.html了解更多详情。

希望这有帮助