带有CKEditor设置的最新Angular2版本

Zafrul Hassan |

当我尝试运行给定的示例代码时,出现此异常:

ckEditor.component.ts:类型“ CkEditorComponent”上不存在属性“ content”。导入CKeditor是否有任何错误。大多数的plunkr示例和示例程序都在旧的angular2上。使用最新的angular2我遇到了以上错误。

在此之前,我还在组件构造函数中获取this.content的异常,称其未定义

ckEditor.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ck-editor',
  template: `
  <ckeditor
    [(ngModel)]="ckeditorContent"
    [config]="{uiColor: '#99000'}"
    (change)="onChange($event)"
    (ready)="onReady($event)"
    (focus)="onFocus($event)"
    (blur)="onBlur($event)"
    debounce="500">
  </ckeditor>
  `
})
export class CkEditorComponent{
 constructor(){
    this.ckeditorContent = `<p>My HTML</p>`;
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';


import { CkEditorComponent } from './ckEditor.component';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,CKEditorModule
    ],
    declarations: [
        CkEditorComponent
    ],
    bootstrap: [CkEditorComponent]
})
export class AppModule { }

主要

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

system.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ng2-ckeditor': 'npm:ng2-ckeditor',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',      
        defaultExtension: 'js'
      },
      'ng2-ckeditor': {
                defaultExtension: 'js'
            },
      rxjs: {
        defaultExtension: 'js'
      }
    }
    map: {
            "ng2-ckeditor": "node_modules/ng2-ckeditor/lib/ckeditor.component.js"
        }
  });
})(this);
亚历克斯·科金(Alex Kojin)

而不是this.content您应该使用this.ckeditorContent变量。因为您将ckeditorContent变量绑定到ckeditor组件。

<ckeditor
[(ngModel)]="ckeditorContent"
...

ckeditorContent向您的组件添加变量

export class CkEditorComponent{
  ckeditorContent = `<p>My HTML</p>`;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ng2-table不适用于最新的Angular2版本

来自分类Dev

Angular 2错误-在RC4版本中,没有将“ exportAs”设置为“ ngModel”的指令

来自分类Dev

如何使用打字稿检查Angular2版本

来自分类Dev

如何从npm或jspm下载angular2版本候选

来自分类Dev

如何从npm或jspm下载angular2版本候选

来自分类Dev

Ionic Build iOS和Xcode Build未部署最新的Ionic 2 Beta 10版本

来自分类Dev

如何在Ubuntu 12.04 LTS上安装最新的grub2版本

来自分类Dev

Ionic Build iOS和Xcode Build未部署最新的Ionic 2 Beta 10版本

来自分类Dev

计算机“ opencv_core249d.dll”缺少文件。带有日食的分辨率版本:Mars.2版本(4.5.2)。

来自分类Dev

带有PhoneGap Build 6.0.0版本的Cordova WKWebView插件

来自分类Dev

如何发布带有commonjs和es6版本的NPM模块?

来自分类Dev

带有rspec 2.14版本的未定义方法`rspec_reset'

来自分类Dev

Cocoapods在最新的Xcode 11.2.1版本上导致错误

来自分类Dev

以编程方式获取最新的python 3版本

来自分类Dev

.Net 2版本的Element At

来自分类Dev

.Net 2版本的Element At

来自分类Dev

如何在SuiteScript 2.0版本中使用带有NVAL2函数的“筛选条件”作为公式日期字段来创建搜索

来自分类Dev

根据ec2版本动态设置ansible-playbook用户变量

来自分类Dev

根据ec2版本动态设置ansible-playbook用户变量

来自分类Dev

带有参数的Angular2 DynamicComponentLoader

来自分类Dev

angular2:带有模板的服务?

来自分类Dev

带有Angular2的非SPA

来自分类Dev

带有 Angular2 图像的 Ngif

来自分类Dev

设置选项在Angular2中选择,并带有异步数据加载

来自分类Dev

最新的Django-1.7版本的“应用程序加载重构”功能有什么好处?

来自分类Dev

具有ID的ASP.NET WebAPI 2版本POST

来自分类Dev

毕加索:设置较旧的OkHttp3版本

来自分类Dev

我有Dell Axim X5版本A05。我可以将其更新到的Windows Mobile最新版本是什么?

来自分类Dev

如何将自定义插件添加到CKEditor 5版本?

Related 相关文章

  1. 1

    Ng2-table不适用于最新的Angular2版本

  2. 2

    Angular 2错误-在RC4版本中,没有将“ exportAs”设置为“ ngModel”的指令

  3. 3

    如何使用打字稿检查Angular2版本

  4. 4

    如何从npm或jspm下载angular2版本候选

  5. 5

    如何从npm或jspm下载angular2版本候选

  6. 6

    Ionic Build iOS和Xcode Build未部署最新的Ionic 2 Beta 10版本

  7. 7

    如何在Ubuntu 12.04 LTS上安装最新的grub2版本

  8. 8

    Ionic Build iOS和Xcode Build未部署最新的Ionic 2 Beta 10版本

  9. 9

    计算机“ opencv_core249d.dll”缺少文件。带有日食的分辨率版本:Mars.2版本(4.5.2)。

  10. 10

    带有PhoneGap Build 6.0.0版本的Cordova WKWebView插件

  11. 11

    如何发布带有commonjs和es6版本的NPM模块?

  12. 12

    带有rspec 2.14版本的未定义方法`rspec_reset'

  13. 13

    Cocoapods在最新的Xcode 11.2.1版本上导致错误

  14. 14

    以编程方式获取最新的python 3版本

  15. 15

    .Net 2版本的Element At

  16. 16

    .Net 2版本的Element At

  17. 17

    如何在SuiteScript 2.0版本中使用带有NVAL2函数的“筛选条件”作为公式日期字段来创建搜索

  18. 18

    根据ec2版本动态设置ansible-playbook用户变量

  19. 19

    根据ec2版本动态设置ansible-playbook用户变量

  20. 20

    带有参数的Angular2 DynamicComponentLoader

  21. 21

    angular2:带有模板的服务?

  22. 22

    带有Angular2的非SPA

  23. 23

    带有 Angular2 图像的 Ngif

  24. 24

    设置选项在Angular2中选择,并带有异步数据加载

  25. 25

    最新的Django-1.7版本的“应用程序加载重构”功能有什么好处?

  26. 26

    具有ID的ASP.NET WebAPI 2版本POST

  27. 27

    毕加索:设置较旧的OkHttp3版本

  28. 28

    我有Dell Axim X5版本A05。我可以将其更新到的Windows Mobile最新版本是什么?

  29. 29

    如何将自定义插件添加到CKEditor 5版本?

热门标签

归档