Question

我已经从登录页面导航到主页。在主页中，如果我单击问题，问题新的内容或链接的内容，则相应页面未显示在首页（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>&nbsp;    
  <a routerLink="questions">Questions</a>&nbsp;
  <a routerLink="questionsnew">New Question</a>&nbsp;
  <a routerLink="questionsview">View Question</a>&nbsp;
  <a routerLink="FancyButtons">Fancy Buttons</a>
  <br>
</div>

<div id="pagecontent">
  <router-outlet></router-outlet>
</div>

<div id="footer">
</div>

请确定我的问题并提供正确的解决方案，以便我可以继续进行示例项目。

谢谢

Rajula

Answer 1

尝试将新组件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-out放置在其中，然后进行这样的布线。

Answer 2

这是因为您尝试导航到的网址不存在

<a routerLink="../questions">Questions</a>&nbsp;
  <a routerLink="../questionsnew">New Question</a>&nbsp;
  <a routerLink="../questionsview">View Question</a>&nbsp;
  <a routerLink="../FancyButtons">Fancy Buttons</a>

主页中的导航在角度2中不起作用

2 个答案: