Fatal编程技术网
  • html/
  • Html CSS引导在角度子组件中不起作用

Html CSS引导在角度子组件中不起作用

html css angular

Html CSS引导在角度子组件中不起作用,html,css,angular,Html,Css,Angular,在Angular 8中将子组件包含在父组件中时，我面临一个问题。我的子组件只包含一个下拉列表。现在，当我在父组件中包含相同的内容，并在父组件的div中使用CSS时，显示输出将如预期的那样出现 父组件： 子组件 但是现在要减少计划在子组件中移动div class=col-sm-5的编码 @Component({ selector: '[app-country]', template: './app-country.component.html', styleUrls: ['./app

在Angular 8中将子组件包含在父组件中时，我面临一个问题。我的子组件只包含一个下拉列表。现在，当我在父组件中包含相同的内容，并在父组件的div中使用CSS时，显示输出将如预期的那样出现

父组件：

子组件

但是现在要减少计划在子组件中移动div class=col-sm-5的编码

@Component({
  selector: '[app-country]',
  template:  './app-country.component.html',
  styleUrls: ['./app-country.component.css']
})
不起作用的新编码：

父组件：

 <div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
        <app-country></app-country>
      </div>
    </div>
子组件：

 <div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
        <app-country></app-country>
      </div>
    </div>
在第二部分中，如果我通过Web控制台扩展输出HTML，然后发现代码中包含CSS，但行为不同

另外，请注意，我使用的是引导CSS

任何帮助都是值得的。

如果您使用的是Angular的早期版本，则封装默认设置不同。你可以试试

@Component({
    // ...
    encapsulation: ViewEncapsulation.None
})
对于.ts文件中的子组件。

如果使用早期版本的Angular，则封装默认设置不同。你可以试试

@Component({
    // ...
    encapsulation: ViewEncapsulation.None
})
对于.ts文件中的子组件。

这是因为现在生成的最后一个HTML如下所示

<div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
         <app-country>
           <div class="col-sm-5">
                <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                  <option *ngFor="let province of countryDetails.details" value= 
                  {{country.id}}>
                  {{country.value}}
                  </option>
                </select>
             </div>
        </app-country>
      </div>
 </div>

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <app-country></app-country>
  </div>
</div>
但早些时候

    <div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
           <div class="col-sm-5">
              <app-country>
                  <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                     <option *ngFor="let province of countryDetails.details" value= 
                       {{country.id}}>
                       {{country.value}}
                     </option>
                   </select>
              </app-country>
           </div>
      </div>
 </div>
正如你们所看到的，在你们的方法中，立场是不同的。第5列之前和第5列之后

这会导致引导行类中断css:

这是因为现在生成的最后一个HTML是这样的

<div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
         <app-country>
           <div class="col-sm-5">
                <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                  <option *ngFor="let province of countryDetails.details" value= 
                  {{country.id}}>
                  {{country.value}}
                  </option>
                </select>
             </div>
        </app-country>
      </div>
 </div>

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <app-country></app-country>
  </div>
</div>
但早些时候

    <div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
           <div class="col-sm-5">
              <app-country>
                  <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                     <option *ngFor="let province of countryDetails.details" value= 
                       {{country.id}}>
                       {{country.value}}
                     </option>
                   </select>
              </app-country>
           </div>
      </div>
 </div>
正如你们所看到的，在你们的方法中，立场是不同的。第5列之前和第5列之后

这会导致引导行类中断css:

更新：解决方案2

参考

然后可以创建一个指令来动态删除父元素

@Directive({
   selector: '[remove-wrapper]'
})

export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
     const parentElement = el.nativeElement.parentElement;
     const element = el.nativeElement;
     parentElement.removeChild(element);
     if(parentElement.parentNode){
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
     }
   }
}
像这样使用它

<div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
         <app-country>
           <div class="col-sm-5">
                <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                  <option *ngFor="let province of countryDetails.details" value= 
                  {{country.id}}>
                  {{country.value}}
                  </option>
                </select>
             </div>
        </app-country>
      </div>
 </div>

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <app-country></app-country>
  </div>
</div>
在父组件中，将其用作：

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <div class="col-sm-5" app-country>
    </div>
  </div>
</div>
现在，您将不会得到任何额外的元素包装器，您的引导css也可以正常工作。希望这将有助于解决您的问题。

更新：解决方案2

参考

然后可以创建一个指令来动态删除父元素

@Directive({
   selector: '[remove-wrapper]'
})

export class RemoveWrapperDirective {
   constructor(private el: ElementRef) {
     const parentElement = el.nativeElement.parentElement;
     const element = el.nativeElement;
     parentElement.removeChild(element);
     if(parentElement.parentNode){
       parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
       parentElement.parentNode.removeChild(parentElement);
     }
   }
}
像这样使用它

<div class="col-lg-12">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
         <app-country>
           <div class="col-sm-5">
                <select [(ngModel)]='countryDetails.default' class="form-control form-control-lg">
                  <option *ngFor="let province of countryDetails.details" value= 
                  {{country.id}}>
                  {{country.value}}
                  </option>
                </select>
             </div>
        </app-country>
      </div>
 </div>

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <app-country></app-country>
  </div>
</div>
在父组件中，将其用作：

<div class="col-lg-12">
  <div class="form-group row">
    <label class="col-sm-1 col-form-label-lg font-weight-bold">Country</label>
    <div class="col-sm-5" app-country>
    </div>
  </div>
</div>
现在，您将不会得到任何额外的元素包装器，您的引导css也可以正常工作。希望这将有助于解决您的问题。

ankit agarwal的回答是相关的。 不过，如果您想将col-sm-5类强制应用到组件中，那么应该在组件内部使用。HostBinding允许您将属性/类/样式附加到承载组件或指令的Dom元素

因此，在您的示例中，保留应用程序国家/地区选择器，我不太喜欢您需要的组件的属性选择器：

/*country.component.css*/ /*这是必要的，以使app country元素作为 *页面布局中的div*/ ：主持人{ 显示：块； }
@ankit agarwal的回答是相关的。 不过，如果您想将col-sm-5类强制应用到组件中，那么应该在组件内部使用。HostBinding允许您将属性/类/样式附加到承载组件或指令的Dom元素

例如，我不需要将属性选择器保留在应用程序中，因此您不需要：

/*country.component.css*/ /*这是必要的，以使app country元素作为 *页面布局中的div*/ ：主持人{ 显示：块； }
@Souvik，您需要首先安装引导程序，并且需要在angular.json中提供引导程序文件的链接

以下是在angular项目中使用引导的方法，希望对您有用

方法1：使用Angular CLI npm安装

要在项目中安装引导程序，可以使用以下命令

npm install bootstrap --save
之后，需要将其添加到angular.json文件中，该文件位于项目的根目录下

"styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
          ],
添加后，您需要关闭并运行项目一次，这样它才能正常工作

方法2：使用CDN复制和粘贴方法。 您可以使用一种旧的方法在项目中使用引导，路径的URL被添加到index.html中以供全局引用

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@Souvik，您需要首先安装引导程序，并且需要在angular.json中提供引导程序文件的链接

以下是在angular项目中使用引导的方法，希望对您有用

方法1：使用Angular CLI npm安装

要在项目中安装引导程序，可以使用以下命令

npm install bootstrap --save
之后，需要将其添加到angular.json文件中，该文件位于项目的根目录下

"styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
          ],
添加后，您需要关闭并运行项目一次，这样它才能正常工作

方法2：使用CDN复制和粘贴方法。 您可以使用一种旧的方法在项目中使用引导，路径的URL被添加到index.html中以供全局引用

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
子组件将在父组件标记a内呈现 在下面

因此，相应地修改css，或者在父级中使用属性选择器来使用组件

eg. <div class="col-sm-5" app-country></div>
您的子组件将在父组件标记内呈现，如下所示

 <app-country>
<div class="col-sm-5">
  ...
</div>
</app-country>
因此，相应地修改css，或者在父级中使用属性选择器来使用组件

eg. <div class="col-sm-5" app-country></div>
您是否只使用Bootstrap CSS，还是还包括Bootstrap的JS？在选项循环中，是country.id还是province.id和province.value？将其作为国家id或国家详细信息。这只是一个供参考的演示数据。另请注意，不包括Bootstrap的JS。@Souvik对您的子组件使用属性选择器，请参阅我的回答您是否仅使用Bootstrap CSS，还是也包括Bootstrap的JS？在选项循环中，是country.id还是province.id和province.value？将其作为国家id或国家详细信息。这只是一个供参考的演示数据。另请注意，不包括引导程序的JS。@Souvik对您的子组件使用属性选择器，请参阅我的回答。我正在尝试将总div移动到我的子组件中。因为无论在何处导入此组件，都将具有相同的列大小和详细信息。我的目的是在导入时减少代码。@Souvik我已更新了答案，并为您的案例提出了另一个解决方案。这解决了我最初的下拉CSS问题，但由于标签相同，我如何在组件中移动标签。使用这段代码，如果我将标签放在组件中，它将删除标签。我尝试的是将总div移动到我的子组件中。因为无论在何处导入此组件，都将具有相同的列大小和详细信息。我的目的是在导入时减少代码。@Souvik我已更新了答案，并为您的案例提出了另一个解决方案。这解决了我最初的下拉CSS问题，但由于标签相同，我如何在组件中移动标签。使用这段代码，如果我把标签放在组件中，它将移除标签。这个解决方案也适用于我。但是你能告诉我如何在组件下添加标签吗。这个解决方案也适用于我。但是你能告诉我如何在组件下添加标签吗。国