Угловой 6 Обнаружение изменений - как настроить дочерний компонент?

Question

Мой родительский угловой компонент имеет вложенный дочерний компонент.Этот дочерний компонент представляет собой список кнопок.При нажатии одной кнопки значение передается дочернему компоненту.Затем этот дочерний компонент обновляется в соответствии с идентификатором.Я реализовал некоторое обнаружение изменений для ребенка.Когда потомок регистрирует обновление, полученное от родителя, он запускает хук 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).Но это все равно дает нам ошибку.Сказать, что он не определен.

Массив опций - это вложенный массив на вызове

Объект, возвращенный из 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

Поскольку вы используете строковый тип ввода, вам не нужно захватывать никакие изменения.Поэтому лучше убрать 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) }
      )
  }
}