Невозможно отобразить Html директивы компонента в родительском компоненте с Angular 8

Question

Я пытаюсь использовать дочерний компонент в родительском элементе для получения данных курса. Когда я использую дочерний компонент в качестве директивы, я могу запустить дочерний метод, чтобы заполнить данные в шаблон HTML дочернего компонента. Но html директивы дочернего компонента не показывает html.

Вот что я попробовал:

Родительский компонент (CourseListComponent)

@Component({
  selector: 'app-course-uploadfile',
  templateUrl: './course-uploadfile.component.html',
  styleUrls: ['./course-uploadfile.component.less'],
})
export class CourseUploadfileComponent implements OnInit,AfterViewInit  {
  @ViewChild(CourseContentsComponent, {static: false}) contents: CourseContentsComponent;
  public course: Course;
  public errorMessage: string = '';
  currentUser: User;


  constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService,
    private router: Router, private activeRoute: ActivatedRoute, 
    private authenticationService: AuthenticationService,private http: HttpClient) { 
    }

  ngOnInit() {

    this.currentUser = this.authenticationService.currentUserValue;
    this.getCourse();
    this.contents.getCourseFiles(this.currentUser.id,this.course.id);
  }

  public getCourse() {
    let id: string = this.activeRoute.snapshot.params['id']
    let apiAddress = `api/course/detail/${id}`
    this.repository.getData(apiAddress)
      .subscribe(res => {
        this.course = res as Course;
      },
        (error) => {
          this.errorHandler.handleError(error);
          this.errorMessage = this.errorHandler.errorMessage;
        });
  }

  ngAfterViewInit() {
    this.contents.getCourseFiles(this.currentUser.id,this.course.id);
  }


}

CourseListComponent Html

<app-course-contents></app-course-contents>

дочерний директивный компонент (CourseContentsComponent)

@Directive({selector: 'app-course-contents'})
@Component({
  templateUrl: './course-contents.component.html',
  styleUrls: ['./course-contents.component.less']
})
export class CourseContentsComponent{


  public errorMessage: string = '';
  courseContents : CourseContent[];
  message:string;



  constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService,
    private router: Router, private activeRoute: ActivatedRoute,
    private authenticationService: AuthenticationService, private http: HttpClient) { 
    }


  public getCourseFiles(teacherId:string,courseId:number){
    let apiAddress = `/api/course/contents?teacherId=${teacherId}&courseId=${courseId}`;
    this.repository.getData(apiAddress)
    .subscribe(res => {
      this.courseContents = res as CourseContent[];
      debugger
    },
      (error) => {
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      });
  }


}

CourseContentsComponent HTML-шаблон

<div class="uk-overflow-auto">
<table class="uk-table uk-table-small uk-table-hover uk-table-divider">
        <thead>
            <tr>
                <th>File Name</th>
                <th>File Length</th>
                <th>Created Date</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>

            <tr *ngFor="let content of courseContents">
                <td class="">{{content.fileName}}</td>
                <td>{{content.fileLength}}</td>
                <td>{{content.createdDate | date: 'dd/MM/yyyy hh:m:s'}}</td>
                <td>
                    <a (click)="downloadCourseFile(content.id)"  id="edit" class="uk-icon-link uk-margin-small-right" uk-icon="icon:cloud-download;ratio:1.5"></a>

                </td>
                <td>
                        <a (click)="deleteCourseFile(content.id)"  id="edit" class="uk-icon-link uk-margin-small-right" uk-icon="icon:trash;ratio:1.5"></a>
                </td>
            </tr>
        </tbody>
    </table>

</div>

Пожалуйста, помогите об этом.

Спасибо

Answer 1

Похоже, что вы помечаете CourseContentsComponent как компонент и как директиву. В Angular 2+ «компонент» - это просто директива с шаблоном ( дополнительная информация здесь ), поэтому селектор должен быть включен в аннотацию @Component (аналогично родительскому компоненту) и @Directive аннотация удалена:

@Component({
  selector: 'app-course-contents',
  templateUrl: './course-contents.component.html',
  styleUrls: ['./course-contents.component.less']
})
export class CourseContentsComponent{