如何在 angular 中将一个组件移动到另一个组件？

Question

你能告诉我如何在 angular 中将一个组件移动到另一个组件吗？我想在用户单击按钮时显示第二页。它应该显示这个组件

这是我的代码 http://plnkr.co/edit/NXo357FdZ5ir834JYuXi?p=preview

import {Component,View} from 'angular2/core';

@Component({
    selector: 'second',
})

@View({
  templateUrl: 'second/second.html'
})
export class secondComponent {

}

Answer 1

您应该使用 Router 组件，单击 Here 了解更多信息。我认为最好有一个主要组件负责保存有关路由器组件和应用程序的配置 routes.like this:

    import {Component} from "angular2/core";
    import {ROUTER_DIRECTIVES,RouteConfig} from "angular2/router";
    @Component({
        selector: 'my-app',
        template: `<router-outlet></router-outlet>`,
        directives: [ROUTER_DIRECTIVES]
    })

    @RouteConfig([
        //define your routes here...
    ])

    export class MainComponent {

    }

一旦你定义了你的路由，在你的 AppComponent 的构造函数中初始化它：

constructor(private _router:Router) {
}

然后您应该将 onclck 函数更改为：

onclck(){
    this._router.navigate(['SecondComponent']);
}

SecondComponent 是您的第二个组件的路由名称，它在您的 @RouteConfing.

中定义

编辑： 这是我的 plunker。仔细看app\boot.ts文件.

如何在 angular 中将一个组件移动到另一个组件？

how to move one component to another in angular?

angular

angular2-routing

angular2-template