Question

应用-component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

个人资料-info.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; 
import { Router } from '@angular/router'; 

@Component({
  selector: 'app-personal-info',
  templateUrl: './personal-info.component.html',
  styleUrls: ['./personal-info.component.scss']
})
export class PersonalInfoComponent implements OnInit {

  constructor(private route: ActivatedRoute, private router: Router) { 
    this.route.params.subscribe(res => console.log(''));
  }

  ngOnInit() {
  }
}

这里我希望profile-info组件需要与app组件嵌套。

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonalInfoComponent } from './personal-info/personal-info.component';     // Add this
import { WorkInfoComponent } from './work-info/work-info.component';  // Add this
import { SkillsInfoComponent } from './skills-info/skills-info.component';  // Add this
import { ProjectInfoComponent } from './project-info/project-info.component';  // Add this
import { EducationalInfoComponent } from './educational-info/educational-info.component';  // Add this
import { DeclarationInfoComponent } from './declaration-info/declaration-info.component';  // Add this

const routes: Routes = [
  {
    path: '',
    component: PersonalInfoComponent
  },
  {
    path: 'profile',
    component: PersonalInfoComponent
  },
  {
    path: 'work',
    component: WorkInfoComponent
  },
  {
    path: 'skills',
    component: SkillsInfoComponent
  },
  {
    path: 'project',
    component: ProjectInfoComponent
  },
  {
    path: 'education',
    component: EducationalInfoComponent
  },
  {
    path: 'declaration',
    component: DeclarationInfoComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.components.html

<router-outlet></router-outlet>
<app-personal-info></app-personal-info>

预期

当我尝试打开“localhost：4200”时，所有组件htmls将通过应用程序组件显示在页面中。

当我尝试打开“localhost：4200 / profile”时，只显示“profile-info.componet” html视图。现在正常工作。

Answer 1

在 app-component.ts 中导入您要添加的组件

import { Component } from '@angular/core';
import { PersonalInfoComponent } from './personal-info/personal-info.component'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

并在 app.component.html 中添加选择器

<app-personal-info></app-personal-info>

Answer 2

好的，感谢编辑，它更清晰。所以你是对的，你可以通过路线实现这一点，并通过创建一个页面，这就是你如何做到这一点：

首先在html模板中的主页面（似乎是PersonalInfo）中注入所有组件： <html>...<div class="col-md-6"><app-skills-info-component [someInput]="someData"></app-skills-info-component> </div> <div class="col-md-3"> <app-other-info-component></app-other-info-component> </div>

然后在您的子组件中添加另一个div col-md-12，以便在您只观看组件时获取整个大小。你的路线看起来很好我会保持这样的。

编辑：确实在您的应用HTML中只需使用<app-personal info></app-personal-info>

可以通过角度4访问app组件中的子组件吗？

2 个答案: