angular4開發過程當中遇到的問題和知識點記錄

1. angular2中的屬性有什麼區別，爲何會報錯呢？

元素上有兩種屬性：property和attribute，attribute是經過getAttribute()和setAttribute()方法進行操做，property是直接經過元素DOM對象的屬性方式方式訪問，好比div.someProp；大多數的angular屬性指令是經過property同名定義的

若是元素上綁定了directive，則angular會識別該元素上面的自定義屬性，而且容許它的存在，合理化它；

若是元素使用attribute元素屬性，那麼綁定變量會報錯，好比<tr colspan="ngBind">中colspan，會報錯「Can't bind to 'colspan' since it isn't a known property od 'tr'」，這種狀況可使用[attr.colspan]=「ngBind」解決。

2.angular4中引入ngx-bootstrap報錯 （Unexpected value '[object Object]' imported by the module... when I import ngx-bootstrap to my project）

通過問題查找，有一種方式提供以下：

tsconfig.app.ts中配置
"paths": {
  "@angular/*": [
    "../node_modules/@angular/*"
  ]
}

此方式對我無效！

在ngx-bootstrap git上面issue中有人遇到相似狀況：https://github.com/valor-software/ngx-bootstrap/issues/2535。

遂猜想是版本號的問題，查看了package.json，npm install ngx-bootstrap安裝的是2.0.0-rc版本，降爲1.9.1版本，It really does work!!! 喜極淚泣~~

備註：經過npm/cnpm uninstall ngx-bootstrap報錯，而且npm/cnpm install ngx-bootstrap#^1.9.1 裝不上，採用簡單暴力方式，直接刪除node_modules文件夾，再npm/cnpm install。

3. form表單

form表單不須要額外的指令名稱，angular默認form標籤綁定了ngFrom指令，須要在所屬module中引入FormModule模塊。

ngForm包括標識有ng-untounched, ng-tounched, ng-prinstine, ng-dirty, ng-valid, ng-invalid。重置form全部標識使用formName.reset()；

<form #formName="ngForm"> formName是模板引用別名;

<input type="text" name="name" [(ngModel)]="model.name" #name="ngModel" required> 模板引用變量能夠訪問模板中輸入框的 Angular 控件，好比name.value訪問該input的value值，還有name.valid, name.invalid, name.pristine, name.dirty, name.errors {required: true/false, minLength:true/false, forbiddenName:true/false}。 這裏，建立了名叫name的變量，而且賦值爲 "ngModel"。

爲何是 「ngModel」？ 指令的 exportAs 屬性告訴 Angular 如何連接模板引用變量到指令。 這裏把name設置爲ngModel是由於ngModel指令的exportAs屬性設置成了 「ngModel」。

 4.簡單講我在使用中由於父級子級路由的問題

ManageModule是父模塊，其下有CreateModule，涉及代碼以下：

create.component.ts

@Component({
  selector: 'app-create',
  template: `
            <div class="container apps-create">
              <p class="h1">建立應用</p>
              <router-outlet></router-outlet>
            </div>
            `,
  styleUrls: ['./create.component.css']
})

create.routing.ts

const createRoutes: Routes = [
    {
        path: '',  //嘗試配置成path:'create'，這裏須要注意的是：爲空默認嵌在父層，若是填入值則爲單獨導向一個頁面，父組件不會繼承
        component: CreateComponent,
        children: [
            {
                path: 'struct',
                component: StructComponent
            },
            {
                path: '',
                component: BasicComponent,
                pathMatch: 'full'
            }
        ]
    }
];
export const CreateRoutes = RouterModule.forChild(createRoutes);

path: 'create' 出現的界面沒有繼承父組件的頭部導航，以下

path: '' 出現界面正常

 

manage.component.ts部分代碼

@Component({
  template: `
            <div class="navbar navbar-inverse navbar-fixed-top">
              <div class="navbar-header"></div>
              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li><a routerLink="/manage" routerLinkActive="active">應用管理</a></li>
                  <li><a routerLink="/manage/analysis" routerLinkActive="active">數據分析</a></li>
                  <li><a routerLink="/manage/test" routerLinkActive="active">搜索測試</a></li>
                  <li><a routerLink="/manage/users" routerLinkActive="active">用戶管理</a></li>
                </ul>
              </div>
            </div>
            <router-outlet></router-outlet>
            `,
  styleUrls: ['./manage.component.css']
})

 

manage.routing.ts 

const manageRoutes: Routes = [
    {
        path: '',  //manage做爲主模塊的一個子模塊，一樣path須要爲空
        component: ManageComponent,
        children: [
            {
                path: 'create',
                loadChildren: './create/create.module#CreateModule'
            },
            {
                path: 'analysis', 
                component: AnalysisComponent
            },{
                path: 'test', 
                component: TestComponent
            },{
                path: 'users', 
                component: UsersComponent
            },{
                path: 'user', 
                component: UserComponent
            },
            {
                path: '',
                component: AppsListInfoComponent,
                pathMatch: 'full'  //path爲空屬性配置，經過設置pathMatch:'full'避免出現manage/**路由顯示的是manage界面內容（路由器應該只有在完整的URL等於時才選擇AppsListInfoComponent組件，所以咱們要把設置爲。）
　　　　　　　　} ] } ]; export const ManageRoutes = RouterModule.forChild(manageRoutes);''pathMatch'full'