Угловой родительско-дочерний компонент: загрузка дочернего элемента при щелчке по родительскому элементу

Question

У меня есть список статей и компонент деталей статьи.

Список статей: - список статей. загрузить в HTML в виде таблицы. обработал событие клика и установил идентификатор статьи - используйте свойство id статьи, чтобы отправить сигнал к деталям статьи для загрузки в качестве свойства @Input.

Деталь статьи: - свойство @Input прослушивает список и регистрирует событие ng-OnChange для обработки любого изменения - Загрузить модель детального вида статьи (с более подробной информацией) - Используйте реактивную форму, чтобы загрузить все свойства, чтобы исправить форму группы. - Используйте свойство образца и отобразите в пользовательском интерфейсе со свойством «Реактивная форма», чтобы знать, что свойство @Input получает правильное значение из списка.

Теперь я получаю правильное значение в свойстве Sample. а также вызывается сервисный метод из события изменения детали статьи. Также установлена ​​модель вида. но проблема здесь, просмотр отображения одним щелчком мыши старых данных.

Если я нажму на вторую статью, мое примерное свойство обновится правильно, что доказывает, что мой компонент детализации получает информацию, и в конечном итоге модель представления также обновляется после ответа службы. но View отображает старую модель View.

Каждый последний клик по последним сохраненным данным Viewmodel отображается на View. есть идеи почему? Вот код:

 **#Article-List Component.ts**   
 @Component({
     selector: 'admin-article-list',
     templateUrl: './article-list.component.html',
     styleUrls: ['./article-list.component.css']
 })
 export class ArticleListComponent extends BaseImplementationComponent {
     public selectedArticleId: string;

     articleClick(event: Event, articleViewModel: ArticleViewModel) {
         this.selectedArticleId = articleViewModel.articleId;
     }
 }

 **#Article-List-Html**
 <div *ngFor="let article of articles">
    <div class="row article" (click)="articleClick($event, article)">
       <div class="col-xs-3 col-sm-3">
          <a href='{{article.articleId}}'>{{article.articleId}}</a>
       </div>
    </div>
    <div>
       <admin-article-detail *ngIf="isReadyToLoad" [articleId]="selectedArticleId"></admin-article-detail>
    </div>
 </div>

 **#Article-Detail-Component.ts**
 @Component({
    selector: 'admin-article-detail',
    templateUrl: './article-detail.component.html',
    styleUrls: ['./article-detail.component.css']
 })
 export class ArticleDetailComponent extends BaseImplementationComponent {
    @Input()
    articleId: string;

    articleViewModel: ArticleViewModel;
    articleDetailFormGroup: FormGroup;

    constructor(private formBuilder: FormBuilder, private articleService: ArticleService) {super();

    this.createArticleDetailForm();
   }

    protected ngOnChangesAtBaseComponent(): void {
       this.loadArticleDetail();
       this.patchArticleDetailForm();
       this.articleIdComingfromParent = this.articleId;
    }

    private loadArticleDetail() {
       this.articleService.getArticle(this.articleId)
       .map(item => this.articleViewModel = item)
       .subscribe(
       (item) => {
          console.log(item);
          this.articleViewModel = item;
       },
       (err) => {
          console.log(err);
       });
    }

    private patchArticleDetailForm() {
       //console.log(this.articleViewModel.articleTitle);
       this.articleDetailFormGroup.get('articleBasicDetail').patchValue({ 
       articleTitle: this.articleViewModel.articleTitle });
    }

    private createArticleDetailForm() {
        this.articleDetailFormGroup = this.formBuilder.group({
           articleBasicDetail: this.formBuilder.group({
           articleTitle: ''
           })
        });
    }
 }


 **#Article-Detail-Html**
 <form class="form-horizontal" [formGroup]="articleDetailFormGroup">
    <div class="form-group" formGroupName="articleBasicDetail">
       <div class="col-sm-12">
          <label for="articleTitle" class="center-block">Street:
             <input type="text" id="articleTitle" class="form-control" formControlName="articleTitle">
             Updated from: {{articleIdComingfromParent}}
          </label>
       </div>
    </div>
</form>

Answer 1

я думаю, что дочерний компонент вызовет изменения, если изменяется ссылка на вход, у вас есть эта ошибка, потому что вы изменяете вход непосредственно, вот решение для вас, используя стратегию обнаружения OnPush и doCheck

 @Component({
  selector: 'admin-article-detail',
  templateUrl: './article-detail.component.html',
  styleUrls: ['./article-detail.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 @Input() articleId: string;
 selectedArticle : string; // create this new property and use it 

 constructor(private cd: ChangeDetectorRef) {}

 ngOnInit() { this.selectedArticle = this.articleId;  }

 ngDoCheck() {
  if (this.selectedArticle !== this.articleId) {
      this.selectedArticle = this.articleId;
      this.cd.markForCheck();
  }
 }