Typescript 从父组件访问子组件
我有一个标题组件、注册组件和登录组件。 头组件的选择器用于登录组件和注册组件。标题中有一个按钮。如果用户位于url…/注册中,则它将显示为登录按钮。单击该按钮,路由将更改为登录Typescript 从父组件访问子组件,typescript,angular,Typescript,Angular,我有一个标题组件、注册组件和登录组件。 头组件的选择器用于登录组件和注册组件。标题中有一个按钮。如果用户位于url…/注册中,则它将显示为登录按钮。单击该按钮,路由将更改为登录 this.router.navigate(['/Login']); 当用户移动到登录页面时,我想将该按钮更改为“注册”。如何从登录组件和注册组件控制该按钮。我已经使用@InputAPI完成了它 Boot.ts 从'angular2/core'导入{Component,bind}; 从“angular2/ROUTER”
this.router.navigate(['/Login']);
当用户移动到登录页面时,我想将该按钮更改为“注册”。如何从登录组件和注册组件控制该按钮。我已经使用
@Input
API完成了它
Boot.ts
从'angular2/core'导入{Component,bind};
从“angular2/ROUTER”导入{ROUTER_提供者、RouteConfig、ROUTER_指令、APP_BASE_HREF、LocationStrategy、RouteParams、ROUTER_绑定};
从'angular2/platform/browser'导入{bootstrap};
从'src/cone'导入{ComponentOne};
从'src/ctwo'导入{ComponentTwo};
@组成部分({
选择器:“我的应用程序”,
模板:`
组件路由器
我已经使用@Input
API完成了它
Boot.ts
从'angular2/core'导入{Component,bind};
从“angular2/ROUTER”导入{ROUTER_提供者、RouteConfig、ROUTER_指令、APP_BASE_HREF、LocationStrategy、RouteParams、ROUTER_绑定};
从'angular2/platform/browser'导入{bootstrap};
从'src/cone'导入{ComponentOne};
从'src/ctwo'导入{ComponentTwo};
@组成部分({
选择器:“我的应用程序”,
模板:`
组件路由器
您可以使用EventEmitter
。您可以使用EventEmitter
。
import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<nav>
<hr>
<a [routerLink]="['ComponentOne']">Login</a><hr/>
<a [routerLink]="['ComponentTwo']">Registartion</a>
</nav>
<hr>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/component-one', name: 'ComponentOne', component: ComponentOne useAsDefault:true},
{path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }
bootstrap(AppComponent, [
ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);
import {Component,View,ViewChild} from 'angular2/core';
import {HeaderCmp} from 'src/header';
@Component({
template: `
<header text="Registration"></header>
<hr>
<h1>Login</h1>
`,
directives:[HeaderCmp]
})
export class ComponentOne {
constructor(){
console.log("first component being called");
}
}
import {Component,View} from 'angular2/core';
import {HeaderCmp} from 'src/header';
@Component({
template: `
<header text="Login"></header>
<h1>Registration </h1>
`,
directives:[HeaderCmp]
})
export class ComponentTwo{
constructor(){
console.log("Second component being called");
}
}
import {Component,View,Input} from 'angular2/core';
import {sharedService} from 'src/sharedService';
@Component({
selector:'header',
template: `
<h4>Header </h4>
<button>{{text}}</button>
`
})
export class HeaderCmp{
@Input() text: string='myText';
constructor(){
console.log("Header being called");
}
}