Взаимодействие компонентов @Input - PullRequest
Новая
       12

Взаимодействие компонентов @Input

0 голосов
/ 04 марта 2019

Я бы хотел, чтобы компонент отправлял входные данные другому компоненту.Ниже приведен код .ts и .html.из двух компонентов.Теперь проблема в том, что html-страница родительского компонента также показывает html-часть дочернего компонента ... Я хочу, чтобы компонент передавал только одну строку дочернему компоненту

Parent.ts

import ...

@Component({
  selector: 'app-parent',
  templateUrl: './parent.html',
  styleUrls: ['./parent.css']
})
export class ParentComponent implements OnInit {

  sostegno : string;

  constructor() { }

  ngOnInit() { }

  avvia1() {
    this.sostegno = "xxx";
    this.router.navigate(['./xxx'], { relativeTo: this.route });
  }

  avvia2()
    this.sostegno = "yyy";
    this.router.navigate(['./yyy'], { relativeTo: this.route });
  }
}

Parent.html 

<div>
  ...
</div>
<app-child [sostegno]="sostegno"></app-child>

Child.ts

import ...

    @Component({
      selector: 'app-child',
      templateUrl: './child.html',
      styleUrls: ['./child.css']
    })
    export class ChildComponent implements OnInit {

      @Input() sostegno : string;

      constructor() { }

      ngOnInit() {
        console.log(this.sostegno);
       }

    }

1 Ответ

0 голосов
/ 04 марта 2019

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

  1. Вы используете this.router без инъекции Routerкласс в вашем конструкторе.

  2. Вы используете this.route без внедрения класса ActivatedRoute в своем конструкторе.

  3. Чтобы проверить, что ваше родительское> дочернее взаимодействие работает, вы можете удалить свой параметр и вместо этого поместить тест для html 

<app-child [sostegno]="'Test'"></app-child>

Это должно работать для вашей функции ngOnInitкоторый находится внутри вашего дочернего компонента.Если это работает, все, что вам нужно сделать, это либо инициализировать sostegno в родительском компоненте, иначе ваш консольный журнал внутри дочернего компонента не будет отражать изменения, когда вы вызываете avvia1 или avvia2 внутри родительского класса.

Надеюсь, это поможет!

...