Javascript 如何在Angular 8中将属性从父组件传递到子组件？

我有一系列档案，如果你选择了一个项目，你就必须转到那个项目。但如果您现在选择一个项目，则会出现如下错误：

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
  </ng-container>

  <ng-container *ngIf="attachmentEntries">
    <app-dossier-correspondence-attachments
      [attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
    ></app-dossier-correspondence-attachments>
  </ng-container>

  <app-dossier-correspondence-item
  [item]="single"
  (goBack)="goBack($event)"
  *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

export class DossierCorrespondenceComponent implements OnInit {
  correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

  @Input() allCorrespondence: Array<DossierEntry>;
  @Input() correspondenceEntries: Array<DossierEntry>;
  @Input() attachmentEntries: Array<DossierEntry>;

  //@Input() myGotoItem: Function;

  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  showingSingle = false;

   single: DossierEntry;

档案对应项.component.html:15错误类型错误：无法 读取未定义的属性“isJson” 在Object.updateDirectives（档案对应项.component.html:15） 在Object.debugUpdateDirectives[作为updateDirectives]（core.js:30537） 在checkAndUpdateView（core.js:29933） 在callViewAction上（core.js:30174） 在执行EmbeddedViewsAction时（core.js:30137） 在checkAndUpdateView（core.js:29934） 在callViewAction上（core.js:30174） 在execComponentViewsAction（core.js:30116） 在checkAndUpdateView（core.js:29939）上 在callViewAction上（core.js:30174）

这条线是这样的：

    <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">

档案室的模型如下所示：

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
  </ng-container>

  <ng-container *ngIf="attachmentEntries">
    <app-dossier-correspondence-attachments
      [attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
    ></app-dossier-correspondence-attachments>
  </ng-container>

  <app-dossier-correspondence-item
  [item]="single"
  (goBack)="goBack($event)"
  *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

export class DossierCorrespondenceComponent implements OnInit {
  correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

  @Input() allCorrespondence: Array<DossierEntry>;
  @Input() correspondenceEntries: Array<DossierEntry>;
  @Input() attachmentEntries: Array<DossierEntry>;

  //@Input() myGotoItem: Function;

  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  showingSingle = false;

   single: DossierEntry;

我已经在父组件中声明了它，如下所示：

<ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (onClick)="gotoItem($event)"> </app-dossier-correspondence-list>
  </ng-container>

  <ng-container *ngIf="attachmentEntries">
    <app-dossier-correspondence-attachments
      [attachmentEntries]="attachmentEntries" (onClick) = "gotoItem($event)"
    ></app-dossier-correspondence-attachments>
  </ng-container>

  <app-dossier-correspondence-item
  [item]="single"
  (goBack)="goBack($event)"
  *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

export class DossierCorrespondenceComponent implements OnInit {
  correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

  @Input() allCorrespondence: Array<DossierEntry>;
  @Input() correspondenceEntries: Array<DossierEntry>;
  @Input() attachmentEntries: Array<DossierEntry>;

  //@Input() myGotoItem: Function;

  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  showingSingle = false;

   single: DossierEntry;

但如果我这样做：

 <ng-container *ngIf="correspondenceEntries">
    <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" (click)="gotoItem(i, entry.type)"> </app-dossier-correspondence-list>
  </ng-container>

  click(i, type) {
    console.log('clicked ' + type);
    this.onClick.emit({i: i, type: type});
  }

我明白了：

点击了通信

这就是档案对应项组件：

export class DossierCorrespondenceItemComponent implements OnInit {
  @Input() item: DossierEntry;

  @Output() goBack = new EventEmitter();

  safeHTMLUrl: SafeResourceUrl;
  fileLoading = false;
  showFile = false;
  canOpenBlob = false;

  constructor(
    public sanitizer: DomSanitizer,
    private router: Router  ) {
    // IE/Edge specific
    this.canOpenBlob = !!window.navigator && !!window.navigator.msSaveOrOpenBlob;
  }

  handleGoBack() {
    this.goBack.emit();
  }
  openPdf(dossierEntryId: number) {
    this.router.navigate(['dossier/overig/pdf/', dossierEntryId]);
  }

  ngOnInit() {
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

这就是错误：

Cannot read property 'isJson' of undefined
    at DossierCorrespondenceItemComponent.push../src/app/dossier/dossier-correspondence-item/dossier-correspondence-item.component.ts.DossierCorrespondenceItemComponent.ngOnInit (dossier-correspondence-item.component.ts:36)

---

您应该将所选条目存储在父组件中的某个位置

selectedEntry: DossierEntry;
selectEntry(entry: DossierEntry): void {
   this.selectedEntry= entry;
}

此外，在angular中应该使用（单击）事件而不是（onClick）。 单击时使用selectEntry方法

对子组件的调用应该有一个@Input（请参阅）

---

调用子组件时，请检查selectedEntry的可空性，这样您就可以在

this.showingsingsingle=true之前尝试try
console.log（this.single）

看到它记录了一些东西到控制台，我想它一定是

未定义的

是的，它是未定义的：console.log（this.single）；this.showingsingsingle=true；但如何改善这一点？@jitender。你看过更新的帖子了吗？这能回答你的问题吗？错误是由（单击）=“gotoItem（i，entry.type）”引发的。您的“entry”对象为null，请在调用它之前添加*ngIf=“entry”。也许添加一个JSFIDLE:）我对这段代码有点迷茫，你能把你的文件放在JSFIDLE或类似的东西里吗？有人知道我如何改进它吗？非常感谢。