2016-10-16 59 views
1

我對學習具有C/C++/Java的面向對象設計經驗的Web應用程序相當(非常)新。我想學習Angular2與打字稿和我下面的例子here瞭解Angular2中最基本的例子

相關片段

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>' 
}) 
export class AppComponent 
{ 
    title = 'Tour of Heroes'; 
    hero = 'Windstorm'; 
} 

我想知道如何角知道到哪裏尋找到((略與示例中進一步的步驟修改)據我所知,綁定)HTML標籤中的{{title}}。我認爲有些東西是隱含的。

角有沒有簡單的尋找範圍內的任何成員或領域?有沒有一個隱含的「this」,即(this.title)。在我的實驗中,似乎沒有任何負面影響,但是我的IDE告訴我一個「未解決的變量或輸入」它在AppComponent中看起來如何知道?是因爲declarations: [ AppComponent ],}? (請參閱app.module.ts)

這與Angular2中的$ scope概念有關嗎?

這裏的訂單重要嗎?即@Component是導出的類的裝飾器?

請隨時糾正我的術語。

+0

我剛剛在三天前開始學習Angular2,但從我收集的內容來看,組件內部的變量都是在{{}}內進行的。您還可以使用* ngFor查看數組,並在數組內顯示值。 – rashadb

+0

是的,@Component是導出類的裝飾器。 – rashadb

+0

現在更有意義。我不清楚「@ Component」的順序,然後是導出問題。那麼我想知道,如果export關鍵字是可選的,如果裝飾一個未導出的類是有意義的。我的直覺告訴它這是有道理的。 – keyboard

回答

1

首先你需要知道在Angular2中一切都是一個組件,一個組件是一組類,它是模板和一些元數據。元數據包含有關組件的信息以及如何應用組件等。

使用裝飾器指定元數據。裝飾者是在組件類上寫的註釋

問題1:我想知道Angular如何知道HTML標籤中的{{title}}如何查找(據我瞭解,綁定){{title}}。我認爲有些東西是隱含的。

:角驗看性質,對象和組件類的方法,它是如何知道你看那邊,那是因爲@Component裝飾

問題2的:這個涉及到Angular2中的$ scope概念?

:Angular2使用this語法即類似於角1.x中controller as語法它不具備的東西$scope$rootScope

問題3:是順序這裏很重要?即@Component是導出的類的裝飾器?

答案:是的,這裏的順序很重要,@Component是一個裝飾器,只不過是一個函數,它應該被調用來裝飾Component類來指定元數據。

因此,無論您使用選擇器<my-app></my-app>作爲嵌套組件還是作爲根組件,Angular2都將使用給定的模板並將其映射到指定的Component類,這就是數據綁定如何與給定的屬性和函數一起工作。