儿童

export class UserheaderComponent implements OnInit,AfterViewInit,OnChanges {
  loading;
  @input() data;
  user = {
    name: '______________',icon: '',username: '_________',uid: '________'
  };
  constructor(private router: Router) {
  }

  goToUser(uid) {
    this.router.navigate(['user'],{ queryParams: { uid: uid } });
  }

  ngOnInit() {
    this.user = this.data;
    console.log(this.data);
  }

  ngAfterViewInit() {
    console.log(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

家长Html

<router-outlet name='userprofile-userhead' [data]="currentUser"></router-outlet>

家长TS

export class UserprofileComponent {
  public currentUser;

  constructor(
    private userFactory: UserFactory,private router: Router,private snack: MatSnackBar) {
    this.userFactory.checkSession(exists => {
      if (!exists) {
        return;
      }
      this.userFactory.getSessionUser((uid,user) => {
        this.currentUser = user;
      });
    });
  }
}

和路由

path: '',component: UserprofileComponent,outlet: 'userprofile',children: [
          { path: '',component: UserheaderComponent,outlet: 'userprofile-userhead' },]

什么都没有传递给孩子,这种安排是否可能,或者我错过了什么？

无法使用共享服务.

每个组件都应该使用它自己的Id.想象一下,这是一个像上下文这样的帖子的时间轴,比如社交媒体时间轴,这是帖子的头,你知道,用户图标,名称……用户名是.因此,’post’组件会将其作为子项注入,并将其传递给用户对象：{name：’…’,用户名：’…’},所以我看不到服务在这里会做什么.

现在,当我们在应用程序的某个地方,一个配置文件组件,搜索组件可能会调用此…

如果你仍然认为服务会做,请详细说明.

您可以尝试实现一个pub / sub服务,您可以在其中分配它将订阅和广播的数据.

试试这个：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

/**
 * Publisher/Subscriber Service
 */
@Injectable()
export class PubSubService {

    private events: any = {};

    constructor() { }

    /**
     * Subscribes the instance of the assigned event name
     * @param eventName
     * Event name of the delegate
     */
    public On(eventName: PubSubEvents): Observable<any> {

        if (typeof this.events[eventName] === 'undefined') {
            this.events[eventName] = new Subject<any>();
        }

        return this.events[eventName].asObservable();
    }

    /**
     * broadcast data to the specified event channel
     * @param eventName
     * Event name of the delegate
     * @param eventArgs
     * Arguments to pass through to the connected channel
     */
    public broadcast(eventName: PubSubEvents,eventArgs: any) {
        if (!this.events[eventName]) {
            return;
        }

        this.events[eventName].next(eventArgs);
    }

}

//Your events
export declare type PubSubEvents =
    "OnChild1" | "OnChild2";

在父组件中,您可以根据需要订阅所有事件.

亲

constructor(private pubsub: PubSubService){
  this.pubsub.On("OnChild1").subscribe((res) =>{ //Child 1 data}));
  this.pubsub.On("OnChild2").subscribe((res) =>{ //Child 2 data}));
}

而在子组件中你必须这样做

孩子1

constructor(private pubsub: PubSubService){
  this.pubsub.broadcast("OnChild1","your_data")
}

孩子2

constructor(private pubsub: PubSubService){
  this.pubsub.broadcast("OnChild2","your_data")
}

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

.container {  
    height: 200px;
}

解决方法

<div>
  <div/>
  <div/>
  <div/> 
  <div/>
</div>

<div>
  <div/>
  <div/>
  <div/>
  <div/>
  <div/>
  <div/>
  <div/>
</div>

解决方法

.widget-button:nth-match(2n+1)
.widget-button:first-match
.widget-button:last-match
.widget-button:only-match