如何以角度6导航到其他页面？ [英] How to navigate to other page in angular 6?
问题描述
我正在尝试将我的页面从登录重定向到另一个页面。我遵循以下代码。
我的登录组件ts文件：
从'@ angular / router'导入{Router};
构造函数（专用路由器：路由器）{
}
funLogin（mobilenumber）{
this.router.navigateByUrl（’registration’）;
}
在我的html中，我在Submit btn中调用此函数，
< button class = common-btn btn（click）= funLogin（mobileNo.value）>提交< / button>
在我的app.login.routing文件中，
导出const loginRouting：路由= [
{
路径：，组件：DashboardRootComponent，canActivateChild：[] ，
子级：[
{路径：，组件：DashboardComponent，pathMatch：'full'}，
{路径：'home'，组件：HomeComponent}，
{路径：注册，组成部分：RegistrationComponent}，
]
}
]
我尝试使用 this.router.navigate&引荐链接。但是它没有用。谁能告诉我我哪里出错了，或者如果您可以给我一个workh示例，那就更好了。
@sasi ..尝试这样，
< a routerLink = / registration>< button class = btn btn-成功提交< / button>< / a>
更新：
要在应用程序中使用路由，必须注册允许角路由器渲染视图的组件。
我们需要在应用程序模块或其中的任何功能模块（您当前的工作模块），以便路由到特定的组件视图。
我们可以通过两种方式注册组件
-
.forRoot（appRoutes）用于应用级别组件的注册，例如
您要在根级别注册的。featuteModules（例如UserManagement）和组件 -
.forChild（featureRoutes）用于功能模块子组件（例如，UserDelete，UserUpdate）。
您可以注册以下内容，
const appRoutes：路线= [
{path：'user'，loadChildren：'./user/user.module#UserModule'}，
{path：'heroes'，component：HeroListComponent}，
];
@NgModule（{
进口：[
BrowserModule，
FormsModule，
RouterModule.forRoot（
appRoutes
）
]，
PS：：要从一个组件导航到另一个组件，必须包含
RouterModule在来自@ angular / router包的相应模块导入数组中
您可以通过两种方式在Angular中导航到另一页。（两者在包装器级别上都是相同的，但从我们这边的实现
routerLink 指令为您提供绝对路径匹配，例如 Router 类的 navigateByUrl（）。
< a [routerLink] = ['/ registration']>< button class = btn btn-success>提交< / button>< / a>
如果使用动态值生成链接，您可以传递路径段的数组，然后是每个段的 params 。
例如 routerLink = ['/ team'，teamId，'user'，userName，{详细信息：true}] 意味着我们要生成一个指向 / team / 11 / user / bob; details = true的链接 。
在使用 routerLink 。
- 如果第一段以
/，路由器将从应用程序的根目录查找路由
。 - 如果第一段以
./开头，或者不是以斜杠开头，则
路由器将查找子节点的当前激活的
路线。 - egment以
../开头，路由器将上升一个
级别。
有关更多信息，请在这里查看。 routerLink
我们需要将 Router 类注入组件才能使用其方法。 / p>
有两种以上的导航方法，例如 navigate（）， navigateByUrl（）和其他一些..但我们将主要使用这两个。
-
根据提供的命令数组和起点进行导航。如果未提供起始路线，则导航是绝对的。
this.route.navigate（['/ team / 113 / user / ganesh'] ）;
navigate（）命令将最新的字符串追加到现有的URL后面。我们还可以通过如下所示的方法来解析queryParamsthis .router.navigate（['/ team /']，{
queryParams：{userId：this.userId，userName：this.userName}
}）;
您可以使用
ActivatedRoute。您可以在此处详细了解paramMap，快照（no-observable替代）。 -
根据提供的URL进行导航，该URL必须是绝对的。
this.route.navigateByUrl（['/ team / 113 / user / ganesh']）;
navigateByUrl（）类似于直接更改位置栏-我们提供了整个新网址。
Im trying to redirect my page from login to another page. Im following this code.
My login component ts file:
import { Router } from '@angular/router';
constructor(private router: Router) {
}
funLogin(mobilenumber){
this.router.navigateByUrl('registration');
}
In my html Im calling this function in a submit btn,
<button class="common-btn btn" (click)="funLogin(mobileNo.value)">Submit</button>
In my app.login.routing file,
export const loginRouting: Routes = [
{
path: '', component: DashboardRootComponent, canActivateChild: [],
children: [
{ path: '', component: DashboardComponent, pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'registration', component: RegistrationComponent },
]
}
]
I have tried with "this.router.navigate" & referredlot of links. But it didnt work. Can anyone please tell me where Im going wrong or if you could give me a workingh sample it would be better.
@sasi.. try like this,
<a routerLink="/registration"><button class="btn btn-success" > Submit </button></a>
Update :
In order to use the routing in your application, you must register the components which allows the angular router to render the view.
We need register our components in App Module or any Feature Module of it (your current working module) in order to route to specific component view.
We can register components in two ways
.forRoot(appRoutes)for app level component registration likefeatuteModules(ex. UserManagement) andcomponentswhich you want register atroot level..forChild(featureRoutes)for feature moduleschild components(Ex. UserDelete, UserUpdate).you can register something like below,
const appRoutes: Routes = [ { path: 'user', loadChildren: './user/user.module#UserModule' }, { path: 'heroes', component: HeroListComponent }, ]; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot( appRoutes ) ],
P.S : In order to navigate from one component to another, you must include the
RouterModulein corresponding Module Imports array from@angular/routerpackage.
You can navigate one to another page in Angular in Two ways. (both are same at wrapper level but the implementation from our side bit diff so.)
routerLink directive gives you absolute path match like navigateByUrl() of Router class.
<a [routerLink]=['/registration']><button class="btn btn-success" > Submit </button></a>
If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.
For instance routerLink=['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true.
There are some useful points to be remembered when we are using routerLink.
- If the first segment begins with
/, the router will look up the route from the root of the app. - If the first segment begins with
./, or doesn't begin with a slash, the router will instead look in the children of the current activated route. - And if the first segment begins with
../, the router will go up one level.
for more info have look here.. routerLink
We need inject Router class into the component in order to use it's methods.
There more than two methods to navigate like navigate() , navigateByUrl(), and some other.. but we will mostly use these two.
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.
this.route.navigate(['/team/113/user/ganesh']);navigate()command will append the latest string is append to existing URL. We can also parse thequeryParamsfrom this method like below,this.router.navigate(['/team/'], { queryParams: { userId: this.userId, userName: this.userName } });You can get the these values with
ActivatedRoutein navigated Component. you can check here more aboutparamMap,snapshot(no-observable alternative).Navigate based on the provided URL, which must be absolute.
this.route.navigateByUrl(['/team/113/user/ganesh']);navigateByUrl()is similar to changing the location bar directly–we are providing the whole new URL.
这篇关于如何以角度6导航到其他页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
