Angular Router 仍然在 Navigation 上显示 HomeComponent 而不仅仅是 ChildComponent

Question

我最近开始学习 Angular，我正在尝试使用 github api 制作一个 github 搜索应用程序，但我在路由和传递方面遇到了一些问题数据。当 he/she 单击查看个人资料按钮时，我希望用户转到 /user/userID 这样的页面。我有四个组件，包括 home、list、404 和 app 组件。当我单击按钮时 url 更改并且列表组件呈现但主页保留在那里。我希望用户只看到子组件中的内容。我正在 React 上用“精确”解决这个问题，但我不知道如何在 Angular 中解决。此外，当我尝试使用 Input() 将数据发送到列表组件时，列表组件也会出现在主页上。我添加了屏幕截图和代码以使其更具描述性。

首页：https://i.stack.imgur.com/BGsPJ.png

user/userID 页数：https://i.stack.imgur.com/WmGBl.png

app.component.html :


  <ng-template [ngIf]="profile !== '' && user" style=" border: 5px solid black;padding: 2em;">
    <img [src]="user.avatar_url" alt="" style="width: auto; height: 100px;">
    <p>Username: {{user.login}}</p>
    <p>Location: {{user.location}}</p>
    <p>E-mail: {{user.email}}</p>
    <p>Blog Link: {{user.blog}}</p>
    <p>Member Since: {{user.created_at}}</p>
    <button href="#" [routerLink]="['/', user.login.toLowerCase(), user.id ]" style="padding: .5em;">View Profile</button>
  </ng-template>

<div>
  <app-list [data]="user"></app-list>
</div>

<div class="container">
  <router-outlet></router-outlet>
</div>

app.component.ts:

import { HttpService } from './http.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  user: any;
  profile: any;
  constructor(private userData: HttpService) {}

  ngOnInit() {
    
  }

  findProfile() {
    this.userData.updateProfile(this.profile);
    this.userData.getUser().subscribe((result) => {
      console.warn(result);
      this.user = result;
    });
  }

  title = 'my-app';
}

list.component.html:

<h1>list component</h1>

list.component.ts:

import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../http.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
})
export class ListComponent implements OnInit {
  @Input() data: any;
  userID: any;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(
      params => this.userID = params['userID']
    );
  }

}

home.component.html:

<h1>home component!</h1>

应用-routing.module.ts:

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: ':user/:userID', component: ListComponent },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Answer 1

请尝试更改此设置

{ path: '', component: HomeComponent },

对此：

{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch:'full'},
{ path: 'list/:user/:userID', component: ListComponent },

还有这个：

[routerLink]="['/', user.login.toLowerCase(), user.id ]"

至：

[routerLink]="['/list', user.login.toLowerCase(), user.id ]"

问题是 HomeComponent 呈现是因为路由器仍然将其识别为您要导航到的路径的有效路径。路径（没有查询参数）仍然是空的。将导航更改为 '/list' 路径应该可以解决问题。

Angular Router 仍然在 Navigation 上显示 HomeComponent 而不仅仅是 ChildComponent

Angular Router still displays HomeComponent on Navigation and not only ChildComponent

angular

typescript

angular-ui-router