Question

我有一个带有几个路由器链接的菜单栏。当我在命令行中运行ng serve时，我的默认路由将打开。然后，当我单击菜单栏的链接时，我可以看到该组件的数据，但是一旦我切换到另一个链接然后又返回，就无法再看到我的数据了吗？为了防止这种情况，我创建了一个函数，每次我转到另一个链接时都会重新加载页面，但这并不是最好的解决方案。我试图用routerLinkActive做些事情，但这并不能解决我的问题。

这是我的菜单栏html文件：

<mat-toolbar color="primary" class="menubar">
  <mat-toolbar-row>
    <div *ngFor="let link of LINKS">
        <button mat-button (click)="reloadPage()"><a [routerLink]="link.linkUrl" class="link">{{link.linkName}}</a></button>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

这是我的菜单栏ts文件：

LINKS: NavigationInterface[];

  constructor(private linkService: NavigationServiceService) { }

  ngOnInit() {
    this.linkService.getLinks().subscribe(link => {
      this.LINKS = link;
    });
  }

  reloadPage() {
    location.reload();
  }

LINKS的界面：

export interface NavigationInterface {
  linkName?: string;
  linkUrl?: string;
}

以下是数据：

linkName        | linkUrl
Home            | /home
Qualifikationen | /skills

这是我要显示的数据的html文件：

  <div *ngIf="SKILLS?.length > 0; else noItem">
    <div *ngFor="let skill of SKILLS | filter:skillGruppe">
      <div class="skill">
        <mat-accordion>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>{{skill.skillname}}
              </mat-panel-title>
              <mat-progress-bar class="progress-bar" [value]="skill.skillwert"></mat-progress-bar>
              <mat-panel-description>
              </mat-panel-description>
            </mat-expansion-panel-header>
            <div>{{skill.skillBeschreibung}}</div>
          </mat-expansion-panel>
        </mat-accordion>
      </div>
    </div>
  </div>

这是我要显示的数据的ts文件：

  SKILLS: IntCvSkill[];

  skillGruppe = 'Entwicklung';

  constructor(private skillService: CvServiceService) { }

  ngOnInit() {
    this.skillService.getSkills().subscribe(cvSkill => {
      this.SKILLS = cvSkill;
    });
  }

  filtereSkills(skillWert: string) {
    this.skillGruppe = skillWert;
  }

这是我的路线：

const routes: Routes = [
  {path: 'skills', component: SkillsComponent},
  {path: 'home', component: HomeComponent},
  { path: '', pathMatch: 'full', redirectTo: 'home' }
];

如何防止这种情况？

Answer 1

问题类似于this问题。我必须创建一个函数，以便在订阅数据时获取数据。

这是我的服务

export class CvServiceService {
  cvSkillCollection: AngularFirestoreCollection<IntCvSkill>;
  cvSkill: Observable<IntCvSkill[]>;

  skillFilter: string;

  constructor(public afs: AngularFirestore) { }

  fetchingData() {
    this.cvSkillCollection = this.afs.collection('cv-skill');

    this.cvSkill = this.cvSkillCollection.snapshotChanges().pipe(map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as IntCvSkill;
        data.id = a.payload.doc.id;
        return data;
      });
    }));
  }

  getSkills() {
    this.fetchingData();
    return this.cvSkill;
  }

  skillFiltern(filterWert: string) {
    this.skillFilter = filterWert;
    return this.skillFilter;
  }

  addSkill(cvSkill: IntCvSkill) {
    this.cvSkillCollection.add(cvSkill);
  }

}

当我在路由器链接之间切换时，数据无法加载

1 个答案: