Trung tâm cá nhân
sách gpt4 ai đã đi

css - Tôi có một con bot. Khi tôi định nghĩa css của mình trong phạm vi toàn cục thì nó hoạt động. Khi tôi định nghĩa css trong thành phần của mình thì nó bị lỗi. Có chuyện gì thế?

In lại 作者：行者123 更新时间：2023-11-28 03:03:49 33 4
mua khóa gpt4 Nike

引用这个plunker:

https://plnkr.co/edit/GWsbdDWVvBYNMqyxzlLY?p=preview

我在 styles.css 文件和 src/app.ts 文件中指定了相同的 css。

如果我在 styles.css 中的 css 中注释掉 src/app.ts 中的 css，它就可以工作。

样式.css:

/* If these are commented in, and the ones in src/app.ts are 
 * commented out, the three items are spaced appropriately. */
/***
md-toolbar-row {
    justify-content: space-between;
}

md-toolbar {
    justify-content: space-between;
}
***/

如果我在 styles.css 中注释掉 css 并在 src/app.ts 中注释掉 css，它会失败。

源/应用程序.ts:

@Thành phần({
  selector: 'my-app',
  mẫu: `
    

      
Hello {{name}}

      
        mood

        Yay, Material in Angular 2!

        
    

  `,
  // If these are commented in, and the ones in style.css are 
  // commented out, the three items are scrunched together.
  /***/
  styles: [
    `md-toolbar-row {
        justify-content: space-between;
    }`, 
    `md-toolbar {
        justify-content: space-between;
    }`
  ]
  /***/
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

我无法想象为整个应用程序和特定组件定义 css 之间的区别。有人能告诉我这是怎么回事吗？

=================================

@bryan60 和@Steveland83 似乎表明问题出在 View 封装的某个地方。经过进一步调查，它在某种意义上确实如此。

如果您查看下面的代码，您会发现 md-toolbar 和 md-toolbar-row 的样式附加了一个属性。但是 md-toolbar 和 md-toolbar-row 的 html 不匹配。只有 md-toolbar 具有附加的属性。 md-toolbar-row 没有。我用>>>>>标记了相关的四行。

这就是问题所在，但是:
1. 我是否将其作为错误报告给 Material 设计人员？
2. 有没有我今天可以使用的解决方法？ 


<đầu>
        : 
  
    
        System.import('app')
            .catch(console.error.bind(console));
    
    
    
>>>>> md-toolbar-row[_ngcontent-c0] {
            justify-content: space-between;
        }
    
    
>>>>> md-toolbar[_ngcontent-c0] {
            justify-content: space-between;
        }
    
    
        .mat-toolbar {
            hiển thị: flex;
                : : 
          .mat-mini-fab,
            .mat-raised-button {
                outline: solid 1px
            }
        }
    


    
        

            
Hello Angular! v4.4.0-RC.0

>>>>> 
                

>>>>> 
                        

                        Yay, Material in Angular 2!


1 Câu trả lời

Angular 的一个特性是View Encapsulation，这基本上意味着您可以定义仅作用于特定组件的样式，而不会影响任何其他组件。

默认情况下，样式的作用域仅适用于引用它们的组件，但您可以选择覆盖它，通过将组件封装设置为 Không có 来使它们全局可用。

Ví dụ

import { Component, ViewEncapsulation } from '@angular/core';
@Thành phần({
  selector: 'component-that-shares-styles',
  templateUrl: './component-that-shares-styles.component.html',
  styleUrls: ['./component-that-shares-styles.component.scss'],
  encapsulation: ViewEncapsulation.None // <-- Set encapsulation here
})

*请注意，您需要从 @angular/core 导入 ViewEncapsulation

关于css - 我有一个笨蛋。当我在全局范围内定义我的 css 时，它起作用了。当我在我的组件中定义我的 css 时，它失败了。这是怎么回事？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46044320/

33 4 0
Bài viết được đề xuất: javascript - PHP 依赖于 Javascript 函数
Bài viết được đề xuất: php - 图像是垂直显示的，而不是水平显示的？
Bài viết được đề xuất: c++ - 如何让鼠标的位置连续离开对话框？ (MFC)
Bài viết được đề xuất: css - 所有设备的复杂背景图像定位
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com