angular - 如何以角度将一个组件移动到另一个组件？

Question

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

这是我的代码 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

您应该使用路由器组件，单击此处了解更多信息。我认为最好有一个主要组件负责保存有关路由器组件和应用程序路由的配置。像这样：

    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文件。