角2和树枝

Question

我正在尝试在角度2组件中使用twig变量和语法，但每次都出错了。

这是我的角色成分：

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

@Component({
    selector: 'signin-component',
    templateUrl: 'app/signin.component.html'
})

export class SignInComponent { }

这是组件HTML

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">Sign in</div>
            <div class="panel-body">
                <form class="" action="/public/auth/signin" method="post" autocomplete="off">
                    <div class="form-group{{ errors.email ? ' has-error' : '' }}">
                        <label for="email">Email</label>
                        <input class="form-control" type="email" name="email" id="email" value={{ old.email }}>
                        {% if errors.email %}
                            <span class="help-block">{{ errors.email | first }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group{{ errors.password ? ' has-error' : '' }}">
                        <label for="password">Password</label>
                        <input class="form-control" type="password" name="password" id="password">
                        {% if errors.password %}
                            <span class="help-block">{{ errors.password | first }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Sign in</button>
                        {{ csrf.field | raw }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这是错误：

zone.js:355 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
Invalid ICU message. Missing '}'. ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
Invalid ICU message. Missing '}'. ("
        </div>
    </div>
</div>
[ERROR ->]"): SignInComponent@29:0
    at TemplateParser.parse (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21)
    at RuntimeCompiler._compileTemplate (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53)
    at eval (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85)
    at Set.forEach (native)
    at compile (http://localhost:8000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49)
    at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:203:28)
    at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:96:43)
    at http://localhost:8000/node_modules/zone.js/dist/zone.js:462:57
    at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:236:37)
    at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:136:47) Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </div>
    </div>
</div>

我是用Slim 3和Twig单独制作的，但现在我想将它与Angular 2整合。谢谢！