Angular Маршрутизатор по-прежнему отображает HomeComponent в навигации, а не только ChildComponent - PullRequest
Новая
       54

Angular Маршрутизатор по-прежнему отображает HomeComponent в навигации, а не только ChildComponent

0 голосов
/ 01 августа 2020

Я недавно начал изучать Angular. Я пытаюсь создать приложение поиска на github с api github, но у меня проблемы с маршрутизацией и передачей данных. Я хочу, чтобы пользователь go переходил на страницу типа / user / userID, когда он / она нажимает кнопку просмотра профиля. У меня есть четыре компонента, включая дом, список, 404 и компонент приложения. Когда я нажимаю кнопку, изменяется 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>

app- 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 {}

1 Ответ

1 голос
/ 01 августа 2020

Пожалуйста, попробуйте изменить это 

{ 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' путь должно решить проблему.

...