更改路由每次都在同一组件上调用ngOniinit

时间:2020-05-17 07:58:30

标签: angular angular-ui-router angular2-routing

我是一名初学者,尝试学习角度。我正在尝试制作博客应用,但我遇到了问题 在我的博客应用中,我有Myposts部分,其中有三个链接 所以我的网址看起来像 http://localhost:4200/myposts/all(默认情况下) http://localhost:4200/myposts/public http://localhost:4200/myposts/private

1-全部帖子 2.公共职位 3个私人帖子

但是当我单击任何链接时,它并没有按预期的方式工作,甚至当我单击私有帖子时,有时也会调用公共发布方法,这存在一些冲突并且活动类也无法正常工作。 另外我注意到在同一页面上更改路由器时,每次都会调用ngOninit方法 这是我的代码。

mypost.html

 <div class="list-group">
            <a class=" list-group-item " [routerLink]="['../all']" [ngClass]="{'active': isAll == true }" (click)="getAllPosts() ">All Posts</a>

            <a class="list-group-item " [routerLink]="['../public']" [ngClass]="{'active': isPublic==true }" (click)="getPublicPosts() ">Public Posts</a>

            <a class="list-group-item " [routerLink]="['../private']" [ngClass]="{'active': isPrivate== true }" (click)="getPriavtePosts() ">Private Posts</a>
        </div>

mypost.ts

  ngOnInit(): void {
  //  this.acrud.getAllPost();
  /*   this.getPublicPosts();
    this.getPriavtePosts();
    this.getAllPosts(); */
  }

  getPublicPosts() {
    console.log("public post")
    this.isAll = false;
    this.isPublic = true;
    this.isPrivate = false;
    this.isFetching = true;
    this.acrud.getPublicPost()
      .pipe(
        map(responseData => {
          const postsArray: UPost[] = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) {
              postsArray.push({ ...responseData[key] });
            }
          }
          return postsArray;
        })
      )
      .subscribe(posts => {
        this.isFetching = false;
        this.public_post = posts;
        this.allpost = this.allpost.concat(this.public_post)
        console.log(this.public_post)
        console.log(this.isAll,this.isPrivate,this.isPublic)
      });


  }
  getPriavtePosts() {
    console.log("priiate post")
    this.isAll = false;
    this.isPublic = false;
    this.isPrivate = true;
    this.isFetching = true;
    this.acrud.getPrivatePost()
      .pipe(
        map(responseData => {
          const postsArray: UPost[] = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) {
              postsArray.push({ ...responseData[key] });
            }
          }
          return postsArray;
        })
      )
      .subscribe(posts => {
        this.isFetching = false;
        this.private_post = posts;
        this.allpost = this.allpost.concat(this.private_post)

        console.log(this.private_post)
        console.log(this.isAll,this.isPrivate,this.isPublic)
      });

  }
  getAllPosts() {
   console.log("all post")
    this.isAll = true;
    this.isPublic = false;
    this.isPrivate = false;
    this.allpost = this.private_post.concat(this.public_post)
    this.acrud.sortDesecending(this.allpost)
    console.log(this.allpost)
    console.log(this.isAll,this.isPrivate,this.isPublic)
  }

crud.service.ts

 getPublicPost(): Observable<UPost[]>{
    return this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)

  }

  getPrivatePost(): Observable<UPost[]>{
    return this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)

  }

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'home/:id', component: UPostDetailComponent },
  { path: 'create-post', component: UCreatePostComponent },
  { path: 'auth', component: AuthComponentComponent },
  { path: 'myposts', component: MyPostsComponent },

  { path: 'myposts/all', component: MyPostsComponent,pathMatch: 'full'  },
  { path: 'myposts/private', component: MyPostsComponent,pathMatch: 'full'  },
  { path: 'myposts/public', component: MyPostsComponent,pathMatch: 'full'  },

  { path: 'myposts/all/:id', component: UPostDetailComponent },
  { path: 'myposts/public/:id', component: UPostDetailComponent },
  { path: 'myposts/private/:id', component: UPostDetailComponent },
];

0 个答案:

没有答案