Question

我正在尝试在index.html中执行以下操作，但遗憾的是我无法使{{1+1}}在其中工作或说出任何角度指令。我想知道这是不是因为Angular在渲染之前没有加载，或者我需要做些什么来解决这个问题。

的index.html

<!DOCTYPE html>
<html>
<head>
    <base href="">
    <script src="libs/shim.js"></script>
    <script src="libs/zone.js"></script>
    <script src="libs/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script></head>
<body>
    <my-app>
        {{1+1}}
    </my-app>
</body>
</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './components/default/app.component';
import { HttpService } from './services/shared/http.service';

@NgModule({
    imports: [BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]    
})
export class AppModule { }

app.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: 'this is {{title}}'  
})

export class AppComponent {
    title: string='hello world';
    constructor() { }
}

我想要的输出应显示 2 ，直到它呈现其中的其他组件。但我没有得到它。它仍然显示{{1 + 1}}。

任何帮助都将不胜感激。

Answer 1

由于一个简单的原因，这是不可能的 - 根组件内的任何内容只会在Angular被引导之前显示。

鉴于这一事实，你不能简单地使用插值，因为它需要由Angular处理 - 而且还没有自我引导。

Answer 2

我在Angular 2中为您创建了一个简单的自定义指令示例。 Plunker SEE and play

您可以在此处查看有关指令和自定义指令的更多信息 Angular Directives discription

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h1>This is Angular1</h1>

<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

{{1 + 1}}未在index.html中处理

2 个答案: