Есть ли у этого подхода шанс, когда я использую экземпляр родительского компонента как свойство дочернего компонента?

avatar
mark
9 августа 2021 в 06:30
75
1
0

Я попытался использовать экземпляр родительского компонента в дочернем компоненте через конструктор. Другими словами, я создаю экземпляр класса родительского компонента как частное свойство и использую его свойства, методы и т. д.

Кроме того, я могу воздействовать на значения свойств родительского компонента напрямую, без использования декораторов ввода, вывода, прослушивателей событий и т. д.

Родительский

@Component({
  selector: 'parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})

export class ParentComponent implements OnInit {

  someParentProperty: number = 10;
  
  constructor() {}
  
  ngOnInit() {}
  
  someParentMethod = (num) => num**2;
}

Ребенок

import { ParentComponent } from '../parent-component';

@Component({
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})

export class ChildComponent implements OnInit {

  someChildProperty: number;
  
  constructor(pc: ParentComponent) {}
  
  ngOnInit() {
    this.someChildProperty = this.pc.someParentMethod(this.pc.someParentProperty);
  }  
  
}

Это довольно удобно, но я не уверен, что это лучшая практика и правильный подход.

Кто-нибудь может объяснить минусы этого?

Источник
lbsn
9 августа 2021 в 07:27
1

"Я не уверен, что это лучшая практика": это не так. Какой смысл определять родительский компонент, если в конечном итоге вы используете его как дочерний компонент? "Я могу воздействовать на значения свойств родительского компонента напрямую, без использования декораторов ввода, вывода, прослушивателей событий": и как это будет полезно? Вы просто нарушаете единую ответственность и инкапсуляцию. Декораторы ввода/вывода существуют в Angular именно для обработки связи родитель/потомок, сохраняя при этом принципы проектирования на основе компонентов.

Eliseo
9 августа 2021 в 07:31
1

вы должны использовать Host : constructor(@Host() private pc:ParentComponent){}, иначе вы вводите «компонент», но не родитель, иначе новый экземпляр. И нет, это не "лучшая практика" в целом. Он используется в конкретных случаях, например. слайд в карусели, подменю в меню... в этом случае существует сильная зависимость между родителем и дочерними элементами, но даже в этом случае вы должны подумать, лучше ли использовать Output, Input или другой способ общаться, чтобы поддерживать отдельные понятия.

mark
9 августа 2021 в 12:49
0

>> Какой смысл определять родительский компонент, если вы в конечном итоге используете его как дочерний компонент? Если у меня есть несколько дочерних компонентов, я буду использовать родительские свойства и методы для работы с ними, а не переопределять его в каждом, например.

Ответы (1)

avatar
Zunayed Shahriar
9 августа 2021 в 07:31
1

Почему вы не пользуетесь услугами?

Чтобы вы могли получить доступ к требуемому методу как из дочерних, так и из родительских компонентов.

Например: Общий сервис:

@Injectable({
 providedIn: 'root',
})
export class CommonService {
    someParentMethod(num) { 
        return num**2;
    }
}

В ParentComponent:

export class ParentComponent implements OnInit {
    constructor(private commonService: CommonService) {}

    ngOnInit() {
        console.log(commonService.someParentMethod(2));
    }
}

Вы можете сделать то же самое в ChildComponent вы можете сделать то же самое.

Это лучший способ для обмена.

Подробнее об услугах здесь.

mark
9 августа 2021 в 09:22
1

Спасибо, я знаю об общих сервисах, но мой вопрос о другом.