Блог

Я пытаюсь использовать следующую библиотеку для преобразования содержимого форматированного текстового поля в HTML с помощью некоторых пользовательских средств визуализации.

https://github.com/kgajera/ngx-contentful-rich-text

По какой-то причине я получаю следующую ошибку, которая, как я предполагаю, каким-то образом связана с тем, как я импортирую модуль выше. Я полагаю, что я импортирую NgxContentfulRichTextModule правильно, поэтому я не уверен, почему шаблон CustomParagraphComponent не может его найти?

Ошибка

ОШИБКА в src / app/post/post.component.ts (шаблон CustomParagraphComponent): 2:28 — ошибка NG8001: ‘ngx-contentful-rich-text’ не является известным элементом:

1. Если ‘ngx-contentful-rich-text’ является компонентом Angular, то убедитесь, что он является частью этого модуля.
2. Если ‘ngx-contentful-rich-text’ является веб-компонентом, добавьте ‘CUSTOM_ELEMENTS_SCHEMA’ в ‘@NgModule.schemas’ этого компонента, чтобы подавить это сообщение.

App.Module.Ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';
import {FlexLayoutModule} from '@angular/flex-layout';
import { HeaderComponent } from './navigation/header/header.component';
import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './navigation/footer/footer.component';
import { PostsComponent } from './posts/posts.component';
import { PostComponent } from './post/post.component';
import { PostCardComponent } from './post-card/post-card.component';
import { FeatureInfoComponent } from './feature-info/feature-info.component';
import { FeatureCardComponent } from './feature-card/feature-card.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { AboutComponent } from './about/about.component';
import { ContributeComponent } from './contribute/contribute.component';
import { ContactComponent } from './contact/contact.component';

import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidenavListComponent,
    HomeComponent,
    FooterComponent,
    PostsComponent,
    PostComponent,
    PostCardComponent,
    FeatureInfoComponent,
    FeatureCardComponent,
    PrivacyComponent,
    AboutComponent,
    ContributeComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    NgxContentfulRichTextModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  

Post.Component.Ts

 import { switchMap } from 'rxjs/operators';
import { Component, OnInit, AfterViewInit, AfterViewChecked, Type } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../contentful.service';
import { Observable } from 'rxjs';
import { BLOCKS, MARKS, Document } from '@contentful/rich-text-types';
import {
  CHILDREN,
  NodeRenderer
} from 'ngx-contentful-rich-text';


@Component({
  template: `
    <p class="text-center">${CHILDREN}</p>
  `,
})
export class CustomParagraphComponent extends NodeRenderer {}

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit, AfterViewChecked {
  public postSlug;
  post: Entry<any>;
  document: Document;

  // nodeRenderers: Record<string, Type<NodeRenderer>> = {
  //   [BLOCKS.PARAGRAPH]: CustomParagraphComponent,
  // };

 nodeRenderers: Record<string, Type<NodeRenderer>> = {
    [BLOCKS.PARAGRAPH]: CustomParagraphComponent,
  };

  constructor(
    public contentfulService: ContentfulService,
    private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.postSlug = this.route.snapshot.params['id'];
    this.contentfulService.getPost(this.postSlug).then(post => 
      { 
        this.post = post;
        this.document = this.post.fields.body;
        console.log(this.document);
      });
  }

  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked');
    if(this.post != null ) {
      console.log('NOT NULL');
      this.contentfulService.returnHTMLfromRichText(this.post.fields.body);
    }
  }

}
  

CustomParagraphComponent Не включен в библиотеку. Это показано только в readme как пример использования пользовательского компонента.

Однако вы можете исправить это, добавив CustomParagraphComponent в declarations массив AppModule .