Question

我有以下表格组件，我正在使用angulardart 0.11和dart 1.4

     @Component(
            selector: 'table-component',
            publishAs: 'ctrl',
            template: '''<table class="table table-striped table-bordered table-condensed">
                            <thead>
                               <tr>
                                 <th ng-repeat="col in ctrl.ItemsSource.ColumnDefs">{{col.displayName}}</th>
                               </tr>
                            </thead>
                             <tbody>
                               <tr ng-repeat="item in ctrl.ItemsSource.Items">
                                 <td ng-repeat="col in ctrl.ItemsSource.ColumnDefs">
                                    {{item.properties[col.name].value}} 
                                 </td>
                               </tr>
                            </tbody>
                         </table>'''
        )
        class TableComponent {

             Scope scope;
             ItemsCollection ItemsSource;

         TableComponent(this.scope) {

           var columnDefs =[new ColumnDef(name:"id",displayName:"ID",isPrimaryKey:true),
                            new ColumnDef(name:"firstname",displayName:"First Name"),
                            new ColumnDef(name:"lastname",displayName:"Last Name"),
                            new ColumnDef(name:"language",displayName:"Language")];

           var items = [new DynamicItem({'id':new DynamicProperty<int>('id',0),
                                         'firstname':new DynamicProperty<String>('firstname','Some'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','English')}),
                        new DynamicItem({'id':new DynamicProperty<int>('id',1),
                                         'firstname':new DynamicProperty<String>('firstname','Another'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','Italian')})];

           this.ItemsSource = new ItemsCollection(columnDefs,items);


       }
 }

模板应用了一些bootstrap css类，但是当它被渲染时，css没有被应用到组件中，这就是我得到的 enter image description here

第一个表来自组件，第二个表是一个html表，并且都应用了相同的css类，那么为什么css类不应用于我的组件？

Answer 1

当您将Bootstrap CSS添加到页面时，它将无法正常工作。默认情况下，Angular.dart组件会在组件内容周围创建一个shadowDOM。 Bootstrap不支持shadowDOM，选择器也无法进入shadowDOM。

您可以设置属性useShadowDom: false（例如selector，publishedAs，...），它可以创建没有shadowDOM的组件。或者您可以使用属性cssUrl将Bootstrap CSS添加到组件，这使它们成为范围样式。您需要将其添加到每个组件。浏览器应该每次都识别它是相同的URL，然后只获取一次文件。

CSS没有在组件模板中应用

1 个答案: