主页导航在 angular 2 中不起作用
Navigation in home page is not working in angular 2
我已经从登录页面导航到首页 page.In 主页,如果我单击问题、问题新问题或其他 link 相应页面未显示
在主页内(http://localhost/home).
这是我所有的代码片段
app.module.ts
var myroutes:Routes=[
{path:"",redirectTo:"home",pathMatch:"full"},
{path:"home",component:HomeComponent},
{path: 'userdetails',component:UserdetailsComponent},
{path:'questions',component:QuestionsIndexComponent},
{path:'questionsnew',component:QuestionsNewComponent },
{path:'questionsview',component:QuestionsViewComponent},
{path:'FancyButtons',component:FancybuttonsComponent}];
var allroutes=RouterModule.forRoot(myroutes);
index.html
<body>
<app-root></app-root>
</body>
app.component.html
<div id="appdesign" align="center" *ngIf="showButton">
<br>
<br><br><br><br><br><br>
<h1>MY FIRST PROJECT IN ANGULAR2</h1>
<br><br><br><br><br><br><br><br>
<h4>Existing Users can: </h4>
<button style="height: 25px;width:50px" routerLink="/login" (click)="btnloginclick()">Login</button>
<br><br><br><br><br>
<h4>New User can:</h4>
<button style="height: 25px;width:50px" routerLink="/register">Register</button>
</div>
<router-outlet></router-outlet>
login.component.html
<div id="logindiv">
<h4>Login</h4>
<form #myloginform="ngForm">
Email : <input type="text"[(ngModel)]="email" required="required" #ctrlemail="ngModel" name="email" ><br>
<span class="error" *ngIf="ctrlemail.invalid && ctrlemail.touched && ctrlemail.errors.required">EMAIL CANT BE BLANK</span>
Password: <input type="password" [(ngModel)]="password" name="password" ><br>
<input type="submit" value="Login" (click)="onLoginClick(myloginform)"><br>
{{message}}
</form>
</div>
login.component.ts
onLoginClick(myloginform)
{
if (myloginform.valid==true)
{
this.objroute.navigate(['home']);
}
Home.component.html
<div id="header">
<br>
<a routerLink="userdetails" routerLinkActive="active">UserDetails</a>
<a routerLink="questions">Questions</a>
<a routerLink="questionsnew">New Question</a>
<a routerLink="questionsview">View Question</a>
<a routerLink="FancyButtons">Fancy Buttons</a>
<br>
</div>
<div id="pagecontent">
<router-outlet></router-outlet>
</div>
<div id="footer">
</div>
请确定我的问题并提供正确的解决方案,以便我可以继续我的示例项目。
谢谢
拉朱拉
尝试在新组件 LayoutComponent 中设置页面作为子组件:
{path:"",component: LayoutComponent, children: [
{path: '', pathMatch: 'full', redirectTo: '/home'},
{path:"home",component:HomeComponent}
{path: 'userdetails',component:UserdetailsComponent},
{path:'questions',component:QuestionsIndexComponent},
{path:'questionsnew',component:QuestionsNewComponent },
{path:'questionsview',component:QuestionsViewComponent},
{path:'FancyButtons',component:FancybuttonsComponent}
]}
所以,创建一个Layout组件,在其中放置router-outlet,然后像这样进行路由。
这是因为您尝试导航到的 url 不存在 试试这样
<a routerLink="../questions">Questions</a>
<a routerLink="../questionsnew">New Question</a>
<a routerLink="../questionsview">View Question</a>
<a routerLink="../FancyButtons">Fancy Buttons</a>
我已经从登录页面导航到首页 page.In 主页,如果我单击问题、问题新问题或其他 link 相应页面未显示 在主页内(http://localhost/home).
这是我所有的代码片段
app.module.ts
var myroutes:Routes=[
{path:"",redirectTo:"home",pathMatch:"full"},
{path:"home",component:HomeComponent},
{path: 'userdetails',component:UserdetailsComponent},
{path:'questions',component:QuestionsIndexComponent},
{path:'questionsnew',component:QuestionsNewComponent },
{path:'questionsview',component:QuestionsViewComponent},
{path:'FancyButtons',component:FancybuttonsComponent}];
var allroutes=RouterModule.forRoot(myroutes);
index.html
<body>
<app-root></app-root>
</body>
app.component.html
<div id="appdesign" align="center" *ngIf="showButton">
<br>
<br><br><br><br><br><br>
<h1>MY FIRST PROJECT IN ANGULAR2</h1>
<br><br><br><br><br><br><br><br>
<h4>Existing Users can: </h4>
<button style="height: 25px;width:50px" routerLink="/login" (click)="btnloginclick()">Login</button>
<br><br><br><br><br>
<h4>New User can:</h4>
<button style="height: 25px;width:50px" routerLink="/register">Register</button>
</div>
<router-outlet></router-outlet>
login.component.html
<div id="logindiv">
<h4>Login</h4>
<form #myloginform="ngForm">
Email : <input type="text"[(ngModel)]="email" required="required" #ctrlemail="ngModel" name="email" ><br>
<span class="error" *ngIf="ctrlemail.invalid && ctrlemail.touched && ctrlemail.errors.required">EMAIL CANT BE BLANK</span>
Password: <input type="password" [(ngModel)]="password" name="password" ><br>
<input type="submit" value="Login" (click)="onLoginClick(myloginform)"><br>
{{message}}
</form>
</div>
login.component.ts
onLoginClick(myloginform)
{
if (myloginform.valid==true)
{
this.objroute.navigate(['home']);
}
Home.component.html
<div id="header">
<br>
<a routerLink="userdetails" routerLinkActive="active">UserDetails</a>
<a routerLink="questions">Questions</a>
<a routerLink="questionsnew">New Question</a>
<a routerLink="questionsview">View Question</a>
<a routerLink="FancyButtons">Fancy Buttons</a>
<br>
</div>
<div id="pagecontent">
<router-outlet></router-outlet>
</div>
<div id="footer">
</div>
请确定我的问题并提供正确的解决方案,以便我可以继续我的示例项目。
谢谢
拉朱拉
尝试在新组件 LayoutComponent 中设置页面作为子组件:
{path:"",component: LayoutComponent, children: [
{path: '', pathMatch: 'full', redirectTo: '/home'},
{path:"home",component:HomeComponent}
{path: 'userdetails',component:UserdetailsComponent},
{path:'questions',component:QuestionsIndexComponent},
{path:'questionsnew',component:QuestionsNewComponent },
{path:'questionsview',component:QuestionsViewComponent},
{path:'FancyButtons',component:FancybuttonsComponent}
]}
所以,创建一个Layout组件,在其中放置router-outlet,然后像这样进行路由。
这是因为您尝试导航到的 url 不存在 试试这样
<a routerLink="../questions">Questions</a>
<a routerLink="../questionsnew">New Question</a>
<a routerLink="../questionsview">View Question</a>
<a routerLink="../FancyButtons">Fancy Buttons</a>