小编EJP*_*EJP的帖子

我正在尝试使用PostCss并试图找到与Sass相似的功能.我坚持的一个功能是类似Sass的功能.

这是我的功能是Sass:

// Variables.scss
$columns: 12; // Grid columns
$max-width: 1200px; // Grid max width

// Function.scss
@function grid($cols,$to-px:false) {
  @if ($to-px == false) { @return ($cols / $columns) * 100% };
  @return round(($max-width / $columns) * $cols);
}

// style.scss
.class {
  width: grid(3);
}
.class2 {
  width: grid(3,true);
}

// outputs to:

// style.css
.class {
  width: 25%;
}
.class2 {
  width: 300px;
}

在PostCSS中,我可以编写一个返回单个CSS值的函数吗？

我正在构建一个包含多个动态面板的页面,每个子面板都具有相同的HTML,因此我创建了一个父面板组件来包装每个面板组件.

问题是我想从孩子向小组发送一个事件,但我似乎无法找到答案.这是我到目前为止所拥有的:

// Panel Panel Component
@Component({
    selector: 'panel',
    template: `
    <div (emittedEvent)="func($event)">
        <ng-content></ng-content>
    </div>
    `
})
export class PanelComponent {

    constructor() {}

    func(event) {
    // Do stuff with the event
    }
}
// Child Panel Component (one of many)
@Component({
selector: 'child-panel-one',
template: `
    // Template stuff
    <button (click)="emitEvent()">Click</button>
`
})
export class ChildPanelOne {
emittedValue: Boolean = false;

@Output() emittedEvent = new EventEmitter();

constructor() {}

private emitEvent() {
    this.emittedValue = true;

    this.emittedEvent.emit(this.emittedValue)
}
}
//
// Main Parent …

我已经构建了一个共享数据服务,旨在保存用户登录详细信息,然后可以使用它来显示标题上的用户名,但我无法使其工作.

这是我的(缩写)代码:

// Shared Service
@Injectable()
export class SharedDataService {

    // Observable string source
    private dataSource = new Subject<any>();

    // Observable string stream
    data$ = this.dataSource.asObservable();

    // Service message commands
    insertData(data: Object) {
        this.dataSource.next(data)
    }
}

...

// Login component
import { SharedDataService } from 'shared-data.service';
@Component({
    providers: [SharedDataService]
})
export class loginComponent {
    constructor(private sharedData: SharedDataService) {}

    onLoginSubmit() {
        // Login stuff
        this.authService.login(loginInfo).subscribe(data => {
             this.sharedData.insertData({'name':'TEST'});
        }
    }
}

...

// Header component
import { SharedDataService } from 'shared-data.service'; …