Question

我是Angular的新手。

我正在尝试构建一个具有列表页面和详细信息页面的简单应用程序。

问题是多方面的：

1-搜索页面两次显示th，并在所有页面中显示。

2-当我尝试使用路线链接时，该应用程序不会加载详细信息页面。

为了解决这个问题，我花了几个小时寻找解决方案...

这是我的代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { SearchService } from './home/search.service';
import { SearchComponent } from './home/search.component';
import { CharDetailComponent } from './char-detail/char-detail.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    CharDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, 
    AppRoutingModule,
    RouterModule,
  ],
  providers: [SearchService],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

export class MyTemplatesModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from './home/search.component';
import { CharDetailComponent } from './char-detail/char-detail.component';


const routes: Routes = [
  {path:'', component: SearchComponent},
  {path:'showDetails', component: CharDetailComponent},

];

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

search.component.ts

import { Component, OnInit } from '@angular/core';
import { SearchService } from './search.service';
import { MovieCharacter } from './movie-character';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit{
  people: MovieCharacter[];
  constructor(private searchService: SearchService,
    private router: Router,
    private route: ActivatedRoute
    ) {
      console.log('data');
     }

  ngOnInit() {
    this.searchService.getPeople().subscribe(data=>{
      console.log(data);
      this.people = data.results;
    });
  }

  ngAfterViewInit(){
    this.searchService.getPeople().subscribe(data=>{
      console.log(data);
      this.people = data.results;
    });
  }

  onSelect(name: string){
    this.router.navigate(['/showDetails/'+name]);
  }
}

search.component.html

<table>
    <tr>
        <th>name</th>
        <th>description</th>
        <th>url</th>
    </tr>
    <tr *ngFor="let person of people">
        <td>{{person.name}}</td>
        <td>{{person.description}}</td>

        <td><a href="{{person.url}}">{{person.url}}</a></td>
        <a href="/showDetails"><button >
            <span>Go to master Page</span>
        </button>
        </a>
    </tr>

</table>

<router-outlet></router-outlet>

char-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { MovieCharacter } from '../home/movie-character';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-char-detail',
  templateUrl: './char-detail.component.html',
  styleUrls: ['./char-detail.component.css']
})
export class CharDetailComponent implements OnInit{
  people: MovieCharacter[];
  param : string;


  constructor(private route: ActivatedRoute) { }

  ngOnInit():void {
    this.showDetails();
  }

  showDetails(){
    this.param = this.route.snapshot.paramMap.get('name');

  }
}

char-detail.component.html

<p>my name is {{param}}</p>

<router-outlet></router-outlet>

我知道代码很脏，并且有很多错误，但是请帮助我！

Answer 1

欢迎来到Angular的世界！

首先，从除app.component.html之外的所有页面中删除--with-python。

完成此操作后，请重新测试页面。如果详细信息页面仍然没有显示，请查看您的控制台中是否有任何Javascript错误，请在此处发布：）

Answer 2

您的代码中几乎没有问题。解决方法如下：

从除app.component.html之外的所有页面中删除<router-outlet></router-outlet>
如果您需要在showDetails页面中传递名称参数，则需要在app-routing.module.ts中指定该参数，因此需要放置{path:'showDetails', component: CharDetailComponent}而不是{path:'showDetails/:name', component: CharDetailComponent}

此更改后，ng再次为您的应用程序提供服务，您可以开始:)。希望对您有帮助。

Angular无法导航到其他组件

2 个答案: