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（页面）”函数，将页面作为参数传递。确实很有效，但是现在我正在为配置文件构建一个页面，我还希望通过@Input（）装饰器传递一些数据来确定我将要看到的用户配置文件。

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

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

Answer 1

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

有关详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html。

我希望这会有所帮助

Angular 2 @Input（）装饰器：使用typescript

1 个答案: