typescript 如何在 angularjs2 中不携带任何参数（id）的情况下从一个组件导航到另一个组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39064383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to navigate from one component to another component without carrying any parameters(id) in angularjs2?
提问by Aravind Palani
In my appcomponent it consists of two button login and signup which directs to corresponding components. In my signupcomponent when the user enters all the text field and clicks the submit button all the text field should disappear and content in my confcomponent show be displayed.(I want to navigate from signupcomponent to confcomponent)
在我的 appcomponent 中，它由两个按钮登录和注册组成，它们指向相应的组件。在我的注册组件中，当用户输入所有文本字段并单击提交按钮时，所有文本字段都应该消失并显示我的 confcomponent 显示中的内容。（我想从 signupcomponent 导航到 confcomponent）
app.component.ts
app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
template: `
<div class="ui buttons">
<button class="ui button"routerLink="/login"routerLinkActive="active">Login</button>
<div class="or"></div>
<button routerLink="/signUp"routerLinkActive="active">SignUp</button>
</div>
<div class="ui form margin-top">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
app.routes.ts
app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { signUpComponent } from './signUp.component';
import { loginComponent } from './login.component';
import { confComponent } from './conf.component';
const routes: RouterConfig = [
{ path: 'signUp', component: signUpComponent },
{ path: 'login', component: loginComponent },
{ path: 'conf', component: confComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];
signup.component.ts
注册.component.ts
import { Component } from '@angular/core';
@Component({
template: `
<h5 class="ui header">Admin detail</h5>
<form>
<div class="field">
<input type="text" placeholder="Company Name">
</div>
<div class="field">
<input type="text" placeholder="Admin Name">
</div>
<div class="field">
<input type="email" placeholder="Admin's Email-id">
</div>
<div class="field">
<input type="password" placeholder="Admin's Password">
</div>
<div class="field">
<input type="password" placeholder="Re-enter Password">
</div>
<div class="ui warning message">
<div class="header">Authentication failed!</div>
<p>Please check your Email-id and Password</p>
</div>
<div class="ui animated button" tabindex="0">
<div class="visible content" routerLink="/conf" routerLinkActive="active">
Submit and Proceed
</div>
<div class="hidden content">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</form>
`
})
export class signUpComponent { }
回答by Jaishankar
Navigate by URl
通过 URl 导航
import {Router} from '@angular/router-deprecated';
this.parentRouter = Router
this.parentRouter.navigateByUrl('/login');
Navigate by Component
按组件导航
this.router.navigate(['/dashboard']);
http://playcode.org/routing-in-angular-2-rc-1/look at this url in detail hope this helps you
http://playcode.org/routing-in-angular-2-rc-1/详细看看这个网址希望对你有帮助
回答by Günter Z?chbauer
You might need to set them to nullexplicitely. In the latest router version (RC.1) it should be the default that query parameters and fragment are not passed along when a routerLink is clicked or router.navigate(...)is called.
您可能需要null明确地将它们设置为。在最新的路由器版本 (RC.1) 中，当单击或router.navigate(...)调用routerLink 时，默认情况下不传递查询参数和片段。
See also
也可以看看
回答by MMR
You can do it like this
你可以这样做
this.router.navigate(['/router']);
