Angular 将数据传递给子组件

我正在尝试使用github api制作github搜索应用程序，但在将数据传递给子组件时遇到了一些问题。当用户单击查看配置文件按钮时，URL将是user/userID，它将仅在子组件中显示配置文件详细信息。我看了一些关于它的教程，但是当我应用这些教程中显示的内容时，配置文件的详细信息会列在主页上，而不是子组件中。 我只需要配置文件组件中的配置文件详细信息

home.component.html：

<input type="text" [(ngModel)]="profile" (keyup)="findProfile()" class="input">
<div>
  <ng-template [ngIf]="profile !== '' && user" >
    <img [src]="user.avatar_url" alt="" class="userAvatar">
    <p>Username: {{user.login}}</p>
    <p>Location: {{user.location}}</p>
    <p>E-mail: {{user.email}}</p>
    <p>Blog Link: {{user.blog}}</p>
    <p>Member Since: {{user.created_at}}</p>
    <button [routerLink]="['', user.login.toLowerCase(), user.id ]" class="viewProfileButton">View Profile</button>
  </ng-template>
</div>

profile.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../http.service';
import { ProfileComponent } from './profile/profile.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  constructor(private userData: HttpService) {}

  ngOnInit() {
  }

  findProfile() {
    this.userData.updateProfile(this.profile);
    this.userData.getUser().subscribe((result) => {
      this.user = result;
      console.warn(this.user);
    });
  }
}

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from 'src/app/http.service';


@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
  userID: any;
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(
      params => this.userID = params['userID']
    );
  }
}

---

将数据从父组件传递到子组件的最推荐方法是在angular中使用

@Input（）

和

@Output（）

修饰符

---

我尝试了这种方法，但父组件和子组件在同一页面中呈现。我希望父组件和子组件位于不同的url路径中，当我转到子组件的url时，我应该只看到其中的配置文件详细信息。我不知道我是否能充分解释自己。如果您想要不同的url路径，请在router.module文件中的routerConfig对象中使用“children”aray，并使用以正确加载同一父级的子级。请参阅以了解有关孩子的更多信息