Как передать данные в дочерний компонент, который маршрутизируется из родительского компонента? - PullRequest
Новая
       3

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

0 голосов
/ 01 октября 2018

Я направляюсь к дочернему компоненту, используя кнопку из шаблона HTML родительского компонента.Как передать данные родительского компонента (скажем, имя) дочернему компоненту?Я не хочу отображать данные в URL (отображается, если передано в [routerLink] - для перехода к дочернему компоненту)

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

Попробуйте совместно использовать состояние с помощью службы.

Создайте службу: 

@Injectable()
export class SomeService {
  data: string;
}

Затем вы можете включить это как в исходный, так и в целевой компоненты. 

@Component({
   ...
})
export class SourceComponent {
  constructor(private service: SomeService) {}

  onSomeAction() {
    service.data = "Some Data";
    // Route to your component.
  }
}

затем используйте его следующим образом: 

@Component({
  ...
})
export class TargetComponent {
  data: string;
  constructor(private service: SomeService) {} 

  ngOnInit() {
    this.data = this.service.data;
  }
}

Вам также необходимо добавить SomeService к хост-модулю: 

@NgModule({
  imports:      [ ... ],
  providers:    [ SomeService ],
  declarations: [ SourceComponent, TargetComponent ]
})

Для чего-то более сложного вы можете посмотреть на такие пакеты, какhttps://ngxs.gitbook.io/ngxs,, который предоставляет несколько мощных функций для управления состоянием в угловых.

0 голосов
/ 01 октября 2018

если ваш дочерний компонент находится внутри вашего родительского компонента, вы можете передать данные в качестве входного аргумента.Посмотрите здесь: https://angular.io/api/core/Input

В родительском компоненте задайте данные, которые вы хотите передать дочернему компоненту, следующим образом: 

<child-component [inputdata]="yourDataObject">

, где «inputdata» - это имя, которое выможете выбрать, а yourDataObject - это атрибут, который вы хотите передать вашему дочернему компоненту.В вашем дочернем компоненте вы можете получить данные следующим образом: 

@Input('inputdata') passedData;

Конечно, имя должно совпадать с именем, переданным в вашем родительском компоненте.

0 голосов
/ 01 октября 2018

Что я понимаю из вашего вопроса, так это то, что вы хотите отправлять данные из родительского маршрута в дочерний маршрут без отображения фактического URL-адреса и без использования ссылки на маршрутизатор, чтобы избежать показа реальных ссылок.Если это так, вы можете создать следующую схему: -

В вашем html вы можете использовать кнопку типа ссылки, используя bootstrap4 , и вам нужно добавить Функция onclick , как показано ниже: - 

<button type="button" class="btn btn-link" (click)="gotochildroute()" >Link</button>

В метод gotochildroute () , используйте маршрутизацию, как показано ниже: - 

this.route.navigate(['childroute'], {skipLocationChange: true});

Если вы используете ссылкутогда вы можете skipLocationChange , как показано ниже: - 

<a [routerLink]="['/childroute'}]" replaceUrl="false" skipLocationChange="true"> </a>

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

...