我是一名初学者,尝试学习角度。我正在尝试制作博客应用,但我遇到了问题 在我的博客应用中,我有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 },
];