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

这是“父级”的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

您应在这样的应用模块中为子组件配置路由

set.seed(42)
M1 = matrix(rnorm(15000*20), nrow = 15000, ncol =20)
system.time({dA = distmc(M1, method = "euclidean", diag = TRUE,
                         upper = TRUE, p = 2)})
system.time(A = as.matrix(dA))

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

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

最终以HTML

RouterModule.forRoot(appRoutes),

此外，为什么还要在同一锚标记上使用点击事件以及路由器链接？

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

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。

Angular 6儿童/父母沟通

2 个答案: