Angular 6儿童/家长沟通

Question

我在替换父组件中的div以包含子组件时遇到问题。(我想要一些类似AJAX但有棱角的东西(例如，我有一个html父级和子级：

parent-component.html
<div class="col-md-12">
<h1>{{parent.name}}</h1>
<p> this is the parent component div. click the link below to replace this div with the children div</p>
<a>Click here</a>
<children></children>
</div>

children-component.html
<div class="col-md-12">
<h1>{{parent.children.name}}</h1>
<p> this is the children div </p>
</div>

因此，我基本上想要的是，如果我们点击链接，父组件文件中的整个div将被子组件中的div替换(然后我们转到子路由/pparent/：id/children/：id(

编辑：我会解释我为什么需要它，这样我就清楚了我有课程组成部分。每门课程都包含一组分段。每个分段都包含类型和数据属性。如果type=video，则数据类型用url进行归档。如果类型为智力竞赛，则数据为空。此外，每个环节都有一系列问题。如果类型为视频，则数组为空。

当我点击一个测验链接时，我想要一个有"开始测验"链接的页面，当我点击它时，整个div会被问题列表(子组件(取代。

接口和关系：

export interface ICourse {
id: number;
title: string;
autor: string;
segments: ISegment[];
}
export interface ISegment {
id: number;
unit_id: number;
unit_title: string;
name: string;
type: string;
data: string;
questions: IQuestion[];
}
export interface IQuestion {
id: number;
question: string;
answer1: string;
answer2: string;
answer3: string;
answer4: string;
correct: number;
}

这是"父"(子组件是课程测验(的html文件

<div class="row content" *ngIf="course">
<!-- Side nav-bar -->
<div class="col-md-3">
<!-- Image Logo -->
<div id="head_sidebar">
<img src="./assets/images/lg-white.png" class="d-inline-block align-top logo" alt="" routerLink="/courses" style="outline: none">
<h3>{{course.title}}</h3>
</div>
<div class="col-md-12 sidenav">
<!-- Menu elemets -->
<div class="nav nav-pills nav-stacked" *ngFor="let unit of course.segments | groupBy: 'unit_title'; let i = index">
<h6 class="course_play_title">Unit {{ i+1 }}: {{ unit.key }} </h6>
<ul>
<li class="course_play_item"  *ngFor="let lesson of unit.value">
<a class="nav-link" routerLink="/courses/{{course.id}}/segments/{{lesson.id}}" (click)=getCurrentSegment(lesson.id)>{{lesson.name}} </a>
</li>
</ul>
</div>
</div>
</div>
<!-- Body -->
<div class="col-md-9 no-gutters" *ngIf="currentSegment">
<!-- Video Div -->
<div class="col-md-12 course_play_body text-center" *ngIf="currentSegment.segment_type === 'Video'">
<h1>{{currentSegment.name}}</h1>
<p class="small-text" *ngIf="course.segments?.length > 0">lesson {{currentSegment.id}} of {{course.segments?.length}}</p>
<hr>
<iframe frameborder="0" allowfullscreen="true" [src]='currentSegment.data | safe'></iframe>
</div>
<!-- Quiz Div -->
<div class="col-md-12 course_play_body text-center" *ngIf="currentSegment.segment_type === 'Quiz'">
<h1>{{currentSegment.name}}</h1>
<p class="text-left"> Now that you've finished this unit, It's time to take a short quiz and see what you learned so far!
You'll need to choose one out of four answers which you think is correct.
After you've finished the quiz, you'll get your grade. feel free to re-take this quiz as much as you like.
Good Luck!
</p>
<p class="big-text" *ngIf="currentSegment.questions?.lenght > 0"> {{currentSegment.questions?.lenght}} questions </p>
<a><h4>Start Quiz</h4></a>
<quiz-course></quiz-course>
</div>
</div>
</div>

路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CourseListComponent } from './courses/course-list/course-list.component';
import { CourseDetailComponent } from './courses/course-detail/course-detail.component';
import { CoursePlayComponent } from './courses/course-play/course-play.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { CourseQuizComponent } from './courses/course-play/course-quiz/course-quiz.component';

// Routing array - set routes to each html page
const appRoutes: Routes = [
{ path: '', redirectTo: '/courses', pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses', component: CourseListComponent,  pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses/:id', component: CourseDetailComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' },
{ path: 'courses/:id/segments/:id', component: CoursePlayComponent, pathMatch: 'full', runGuardsAndResolvers: 'always',
children: [{ path: 'questions/:id', component: CourseQuizComponent }]
},
{ path: '**', component: PageNotFoundComponent, pathMatch: 'full', runGuardsAndResolvers: 'always' }];
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
export class AppRoutingModule {  }

Answer 1

您应该为应用程序模块中的子组件配置路由，如

const appRoutes: Routes = [
{ path: 'courses/:courseid/:lessonId', component: desire component },
];

在导入数组中，将其导入为：

RouterModule.forRoot(appRoutes),

最后在HTML 中

<a class="nav-link" [routerLink]="['/courses',course.id,lesson.id]">{{lesson.name}} </a>

此外，为什么你们在同一个锚标签上使用点击事件和路由器链接？

注意：我还没有测试代码，我只是举了一个例子

Answer 2

快速且肮脏，您可以这样修复它：

<a *ngIf="!showQuiz" (click)="showQuiz = true"><h4>Start Quiz</h4></a>
<quiz-course *ngIf="showQuiz" [questions]="currentSegment?.questions"></quiz-course> 

你必须设置一个@Input((问题；在您的子组件中。

---

另外，您可以使用

route: ActivatedRoute,

以在加载时设置currentSegment。