Question

修改

我有一个Web服务Rest，提供如下菜单：

{
  "items": [
    {
      "content-type": "one",
      "title": "title1",
      "url": "url1";
    },
    {
      "content-type": "two",
      "title": "title2",
      "url": "url2"
    }
  ]
}

在我的开始页面中，我得到了这个菜单，它提供了动态内容，它提供了不同的页面。

@Component({
    providers: [APIClient],
    templateUrl: 'build/app.html',
    selector: 'my-app'
})
class MyApp {
    @ViewChild(Nav) nav: Nav;

    rootPage: any = SomeComponent;

    @Input() url: string;


    pages: Array<{ title: string, component: any, url: string }>;

    constructor(public platform: Platform, private _apiClient: APIClient) {

        this.initializeApp();
        this._apiClient.get("http://localhost:8080/MyApp/context/menu",
            'menu',
            null,
            (data) => this.handleSuccessGetMenu(data),
            null);
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();
        });
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
    }



    handleSuccessGetMenu(data) {


        if ("" != data.items) {
            this.pages = [];
            for (var item of data.items) {

                if (item['content-type'] === "one" || item['content-type'] === "two") {
                    this.pages.push({ title: item['title'], component: DynamicComponent, , url: item['url'] });
                    this.url = item['url'];
                }

            }
        }
    }

}
ionicBootstrap(MyApp);

我想访问我的组件上的url，但我不知道如何实现它。

@Component({
  providers: [APIClient],
  templateUrl: './build/components/dynamic.html'
})
export class DynamicComponent {

//HOW CAN I ACESS URL

private dynamicurl=myapp.url;

  //construtor
  constructor(private _apiClient: APIClient, public navParams: NavParams) {
         **IT´S POSSIBLE THIS WAY to GET URL FOR CURRENT PAGE?**
   console.log(navCtrl.get('url'));

  }
}

Answer 1

应用组件

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
            <child [url]="link"></child>`
})
export class AppComponent implements OnInit {

  link: string = "hello";

  ngOnInit(): void {

  };

}

子组件

@Component({
    selector: 'child',
    template: `
      {{ url }}
    `
})
export class ChildComponent implements OnInit {
    @Input() url;

    constructor() {
    }

    ngOnInit(): void {
      console.log(this.url);
    };
}

有关如何从父组件访问您的网址的示例，请参阅我的plunker。我不确定这是否适用于离子，但如果它是角2，它应该是相同的过程。

基于我对你的问题的理解，我希望这正是你所寻找的。

来自Start Page的使用Ionic 2 + Angular 2的访问数据

1 个答案: