Angular 6 Change detection - 如何设置子组件？

Posted 2023-02-23

【中文标题】Angular 6 Change detection - 如何设置子组件？

【英文标题】：Angular 6 Change detection - how to setup the child component?

【发布时间】：2019-03-18 08:34:19

【问题描述】：

我的父 Angular 组件有一个嵌套的子组件。该子组件是一个按钮列表。单击一个按钮时，会将一个值传递给子组件。然后该子组件会相应地更新为 id。我已经对孩子实施了一些变化检测。当孩子注册来自父母的更新时，它会运行 ngOnChanges 挂钩。这里我调用我的后端并返回数据

我的代码运行良好，但它看起来像一个 hack。正如您在以下代码中看到的，我分离了 changeDetection 对象。在 ngOnChanges - 在订阅部分，我再次重新附加 cd。我不喜欢

你们能给我一些建议吗？

@Component(
  selector: 'app-challenge',
  templateUrl: './challenge.component.html',
  styleUrls: ['./challenge.component.css']
)
export class ChallengeComponent implements OnInit 
  @Input() focusedChallenge: string;

  eventId = ;
  challenge: Challenge;
  userSelection;

  constructor(
    public snackBar: MatSnackBar,
    private eventService: EventService,
    private activeRoute: ActivatedRoute,
    private cd: ChangeDetectorRef
  )   
this.cd.detach()


  ngOnInit() 
    this.eventId = this.activeRoute.snapshot.params.id;
  

  ngOnChanges() 
    this.eventService.getChallenge(this.focusedChallenge)
      .subscribe(
        res => 
          this.cd.reattach();
          console.log(res)
          this.challenge = res
        ,
        err =>  console.log(err) 
      )
      challengeSelected.currentValue.toUpperCase();
  

响应答案更新

它确实为我提供了我想要的 ngOnChanges(changes: SimpleChanges) 结果。但它仍然给我们一个错误。说它是未定义的。

options 数组是 Challenge 上的嵌套数组

从 db 返回的对象

_id: "5b86dc5bfb6fc03893e55001", shortEventId: "d2d3", organization: "Brædstrup", name: "1. december", winner: "", …
born: "1. decemberplus andet"
endDate: "2018-10-06T23:59:00.000Z"
id: "5b86dc5bfb6fc03893e55001"
name: "1. december"
options: Array(4)
0: name: "Matas", isCorrect: true, description: "Matas er den førende skib", image: "https://cityxpstorage.blob.core.windows.net/images/Matas.png", id: null
1: name: "Føtex", isCorrect: false, description: "Føtex er en dejlig butik", image: "https://cityxpstorage.blob.core.windows.net/images/Føtex.png", id: null, …
2: name: "Kvickly", isCorrect: false, description: "Kvickly er en dejlig butik", image: "https://cityxpstorage.blob.core.windows.net/images/Matas.png", id: null, …
3: name: "MC Jørgensen", isCorrect: false, description: "MC Jørgensen er en dejlig butik", image: "https://cityxpstorage.blob.core.windows.net/images/Matas.png", id: null
length: 4
__proto__: Array(0)
organization: "Brædstrup"
shortEventId: "d2d3"
startDate: "2018-10-06T00:00:00.000Z"
winner: ""
_id: "5b86dc5bfb6fc03893e55001"
__proto__: Object

【问题讨论】：

您不需要对ChangeDetectorRef 做任何事情。任何时候focusedChallenge 被改变，它都应该触发ngOnChanges

问题是我的视图首先更新 - 但没有附加值。它给了我一个 [object] is undefined 错误。所以看来我需要先分离视图以抑制错误。

您可以通过对它执行if 检查来处理它未定义的情况。你可以使用if (suchAndSuch != null)之类的东西，或者如果它在模板中，你可以使用suchAndSuch?.myProp，其中?会阻止它尝试读取myProp是suchAndSuch是空或未定义

你能举个例子吗？我应该在哪里进行检查？

哪个变量是未定义的？你能发布实际的错误信息吗？

【参考方案1】：

由于您使用的是字符串类型输入，因此您不需要捕获任何 ChangeDetection。所以最好删除ChangeDetectorRef，并在@Input 值发生变化时让角度触发ngOnChanges 方法。

你的代码应该是 -

@Component(
  selector: 'app-challenge',
  templateUrl: './challenge.component.html',
  styleUrls: ['./challenge.component.css']
)
export class ChallengeComponent implements OnInit 
  @Input() focusedChallenge: string;

  eventId = ;
  challenge: Challenge;
  userSelection;

  constructor(
    public snackBar: MatSnackBar,
    private eventService: EventService,
    private activeRoute: ActivatedRoute
  )   


  ngOnInit() 
    this.eventId = this.activeRoute.snapshot.params.id;
  

ngOnChanges(changes: SimpleChanges) 

    let newFocusedChallenge  = changes["focusedChallenge"].currentValue;

    this.eventService.getChallenge(newFocusedChallenge)
      .subscribe(
        res => 
          console.log(res)
          this.challenge = res;
          //challengeSelected.currentValue.toUpperCase(); //not sure if is required
        ,
        err =>  console.log(err) 
      )
  

【讨论】：

这是什么语法？ changes["focusedChallenge"];.currentValue

它是changes["focusedChallenge"].currentValue;。也更正了答案。