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 替换（我们转到子路由 /parent/: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;
}

这是'parent'的html文件（子组件是course-quiz）

  <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 },
];

在 imports 数组中导入为：

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。