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+中，“组件”只是带有模板（more info here）的指令，因此选择器应包含在@Component批注（类似于父组件）和{{1 }}注释已删除：

@Directive

无法在Angular 8的父组件中显示指令组件HTML

1 个答案: