Question

我从零开始学习Angular，我很新。如果我的问题非常简单，请原谅我。我做过研究，但这些解决方案对我不起作用。我有一个app.component.html，其中包含以下代码：

<!--The content below is only a placeholder and can be replaced.-->
import { FormsModule } from '@angular/forms';
import { DomSanitizer} from '@angular/platform-browser'
import { SafeHtml } from '@angular/platform-browser'

<input type="text" [(ngModel)] = "name">
<p>{{ name }}</p> // I have tried {{ '{' }} name {{'}'} as suggested in other forums.

然后我有一个app.component.ts文件，其中包含：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '' ;
}

我正在使用Angular CLI来处理构建代码。但我不确定为什么我会低于错误。

compiler.es5.js:1690 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("

<input type="text" [(ngModel)] = "name">
<p>{{ name }}</p>
[ERROR ->]"): ng:///AppModule/AppComponent.html@7:0
Invalid ICU message. Missing '}'. ("

<input type="text" [(ngModel)] = "name">
<p>{{ name }}</p>

[ERROR ->]"): ng:///AppModule/AppComponent.html@7:0
    at syntaxError (compiler.es5.js:1690)
    at DirectiveNormalizer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeLoadedTemplate (compiler.es5.js:14128)
    at compiler.es5.js:14114
    at Object.then (compiler.es5.js:1679)
    at DirectiveNormalizer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeTemplateOnly (compiler.es5.js:14114)
    at DirectiveNormalizer.webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeTemplate (compiler.es5.js:14096)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.es5.js:15125)
    at compiler.es5.js:26802
    at Array.forEach (<anonymous>)
    at compiler.es5.js:26801
syntaxError @   compiler.es5.js:1690
webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeLoadedTemplate @   compiler.es5.js:14128
(anonymous) @   compiler.es5.js:14114
then    @   compiler.es5.js:1679
webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeTemplateOnly   @   compiler.es5.js:14114
webpackJsonp.../../../compiler/@angular/compiler.es5.js.DirectiveNormalizer.normalizeTemplate   @   compiler.es5.js:14096
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.loadDirectiveMetadata   @   compiler.es5.js:15125
(anonymous) @   compiler.es5.js:26802
(anonymous) @   compiler.es5.js:26801
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules    @   compiler.es5.js:26798
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @   compiler.es5.js:26768
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync  @   compiler.es5.js:26697
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone   @   core.es5.js:4536
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule    @   core.es5.js:4522
../../../../../src/main.ts  @   main.ts:11
__webpack_require__ @   bootstrap ac0793c…:54
0   @   main.bundle.js:182
__webpack_require__ @   bootstrap ac0793c…:54
webpackJsonpCallback    @   bootstrap ac0793c…:25
(anonymous)

我非常感谢任何帮助。非常感谢你

Answer 1

根据你在问题中提供的各种低信息，你不是要逃避花括号，你很可能是其中一种情况：

不平衡双花括号
使用对编译器无效的语句

对于你，后者应该是这种情况，所以通过从模板中删除import语句到组件来修复它。

编辑：

更具体地说，你有这样的陈述：

import { FormsModule } from '@angular/forms';

在您的模板中，因此编译器导入只是一个简单的文本，然后它会看到第一个{，然后是FormsModule。现在，编译器根据它找到的最佳匹配期望另一个{。所以，你有两者的混合，使用一个在模板的上下文中没有意义的语句，并且基于你有不平衡的花括号。

Answer 2

导入语句不属于html文件（模板）。将它们从 app.component.html 移到 app.component.ts ：

app.component.html ：

<input type="text" [(ngModel)] = "name">
<p>{{ name }}</p>

app.component.ts ：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DomSanitizer} from '@angular/platform-browser'
import { SafeHtml } from '@angular/platform-browser'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '' ;
}

意外的角色＆＃34; EOF＆＃34; （你的模板中是否有未转义的＆＃34; {＆＃34;？使用＆＃34; {{＆＃39; {＆＃39;}}＆＃34;）以逃避它。）（＆＃ 34;

2 个答案: