Question

我的父角度组件有一个嵌套的子组件。该子组件是按钮列表。单击一个按钮时，会将一个值传递给子组件。然后，该子组件将相应地更新为一个id。我对孩子实施了一些更改检测。当子项注册来自父项的更新时，它将运行ngOnChanges挂钩。在这里，我打电话给我的后端，数据返回

我的代码运行正常，但是似乎很容易破解。如下面的代码所示，我分离了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（更改：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

Answer 1

由于使用的是字符串类型输入，因此无需捕获任何ChangeDetection。因此，最好删除ChangeDetectorRef并在ngOnChanges值更改时让角度触发@Input方法。

您的代码应为-

@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) }
      )
  }
}

Angular 6更改检测-如何设置子组件？

1 个答案: