Question

我在Angular 2.3应用程序（使用Webpack）中遇到以下问题已经挣扎了一段时间：当我走的时候，我试图通过 Observable 对象懒洋洋地显示我的数据（个人书签）到个人（用户书签）路线，但只有当我点击个人链接时，它才会在浏览器第二次中呈现，尽管落后于最初加载数据的场景（GET请求成功完成）。我的配置似乎是某种变更检测问题...我将在下面列出所涉及的组件：

导航代码：

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" [routerLink]="['']" routerLinkActive="active">
    <img src="/img/logo.png" width="35" height="35" class="d-inline-block align-top" alt="">
    Bookmarks
  </a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['personal']" routerLinkActive="active">Personal</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['personal/new']" routerLinkActive="active">New personal bookmark</a>
    </li>
  </ul>
</nav>

app.routing.ts 摘录：

  {
    path: 'personal',
    loadChildren: './personal/user-bookmarks.module#UserBookmarksModule'
  }

个人博彩公司模块（延迟加载）：

  @NgModule({
  imports: [RouterModule.forChild([
    { path: '', component: UserBookmarksComponent },
    {
      path: 'new',
      component: UserBookmarkFormComponent
    },
    {
      path: 'bookmarks/:id',
      component: BookmarkDetailComponent
    },
  ])],
  exports: [RouterModule]
})
export class UserBookmarksRoutingModule {}

UserBookmarksComponent：

@Component({
  selector: 'my-user-bookmarks',
  templateUrl: './user-bookmarks.component.html',
  styleUrls: ['./user-bookmarks.component.scss']
})
export class UserBookmarksComponent implements  OnInit{

  userBookmarks: Observable<List<Bookmark>>;

  constructor(private userBookmarkStore: UserBookmarkStore) { }

  ngOnInit(): void {
    this.userBookmarks = this.userBookmarkStore.getBookmarks();
  }

}

user-bookmarks.component.html

<div class="container">
  <hr>
  <h3>Personal bookmarks</h3>
  <my-async-user-bookmark-list [bookmarks]="userBookmarks"></my-async-user-bookmark-list>
</div>

将 userBookmarks 作为输入的 AsyncUserBookmarksListComponent

@Component({
  selector: 'my-async-user-bookmark-list',
  templateUrl: './async-user-bookmark-list.component.html',
  styleUrls: ['./async-user-bookmark-list.component.scss']
})
export class AsyncUserBookmarksListComponent{

  @Input()
  bookmarks: Observable<Bookmark[]>;

  constructor( private route: ActivatedRoute, private router: Router, private userBookmarkStore: UserBookmarkStore) {}

  /**
   *
   * @param bookmark
   */
  gotoDetail(bookmark: Bookmark): void {
    console.log("At least lands in the method........");
    let link = ['./bookmarks', bookmark._id];
    this.router.navigate(link, { relativeTo: this.route });
  }

  deleteBookmark(bookmark:Bookmark): void {

    let obs = this.userBookmarkStore.deleteBookmark(bookmark);
    obs.subscribe(
      res => {
        this.router.navigate(['/personal']);
      });
  }

}

最后是 async-user-bookmark-list.component.html

<div *ngFor="let bookmark of bookmarks | async" class="card">
  <div class="card-block">
    <h4 class="card-title"><a href="{{bookmark.location}}" target="_blank">{{ bookmark.name }}</a></h4>
    <p class="card-text">{{ bookmark.description }}</p>
    <button type="button" class="btn btn-primary" (click)="gotoDetail(bookmark)">Edit</button>
    <button type="button" class="btn btn-danger" (click)="deleteBookmark(bookmark)">Delete</button>
  </div>
  <div class="card-block">
    <b>Tags:</b>
    <ul class="tags">
      <li *ngFor="let tag of bookmark.tags">{{tag}}</li>
    </ul>
  </div>
  <div class="card-footer">
    <b>Category:</b> {{ bookmark.category }}
  </div>
</div>

此外，当我点击从个人列表中删除书签时，它会在幕后删除，但更改会传播到个人书签列表，直到我再次点击个人链接。

完整项目位于https://github.com/Codingpedia/bookmarks/tree/feature/move_delete_to_personal_bookmarks

非常感谢您的意见。感谢

角度2中的延迟加载，更改检测和可观察问题

0 个答案: