我有一个根组件,它有一个改变的布尔值,我想订阅那个改变的布尔值,我的组件<router-outlet>.我知道我需要使用某种类型的共享双向服务.但是,共享服务的文档对我来说并不是很有意义.(我想我无法绕过宇航员的例子)在这里,任何帮助都会非常感激,这里有一些代码来展示我想要做的事情.
根组件
@Component({
selector: 'my-app',
template: `<nav [state]="boolshow" (show)="changeValue($event)" ></nav>
<article><router-outlet></router-outlet></article> <-----component in router here
<footer></footer>
<h3>toggle state: {{boolshow}}</h3>`,
styleUrls: ['./Css/app.css'],
})
export class AppComponent {
boolshow: boolean; <-----boolean that needs to be read
}
我有一个具有变化的布尔值的服务，我想订阅组件中的布尔值变化。如何才能实现这一目标？
这是我的服务...
private subBoolShowHideSource = new Subject<boolean>();
subBoolShowHide$ = this.subBoolShowHideSource.asObservable();
showHide(eventValue: boolean) {
this.subBoolShowHideSource.next(eventValue);
console.log("show hide service " + eventValue);
}
这是我试图读取布尔值的组件......
boolShowGTMDetails: any;
subscription: Subscription;
constructor(private service: ShowHideService){
this.subscription = this.service.subBoolShowHide$.subscribe(
(data:boolean) => {
this.boolShowGTMDetails = data,
error => console.log(error),
console.log("winner winner chicken dinner");
}
);
}
基本上，更改检测不起作用，我们将不胜感激任何帮助，提前致谢！
我知道我可以创建指令来操作属性。我想知道操作 contenteditable 的真/假值的概念是否相同？或者，还有更好的方法？基本上，我有将评论放入表格的评论部分，我希望能够通过按钮编辑每个评论以激活 contenteditable 以等于 true。我试图像这样从 contenteditable 中调用一个函数，contenteditable="Edited()"但似乎不支持传递一个函数。
编辑
我也尝试过将可竞争的称为这样的指令......
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myEdit]' })
export class EditDirective {
constructor(el: ElementRef) {
el.nativeElement.contenteditable = 'true';
}
}
然后在 html 上调用指令，<td myedit>但没有运气。为了验证我的指令被正确调用，我更改了它以更改文本的颜色并且它起作用了，所以我倾向于这不是操作 contenteditable 属性的正确方法。
这里也是我尝试的 plunkr https://plnkr.co/edit/029WpB11IqkvYlQieT6h?p=preview
我有一个组件,当用户登录它时,路由到一个名为的网址/dashboard我正在努力弄清楚为什么我会收到以下错误.
cannot read property 'args' of undefined
我一直在关注路由器测试的官方文档https://angular.io/docs/ts/latest/guide/testing.html#!#routed-component, 但它似乎没有帮助.我的一半问题是我不太了解文档中的所有代码.这是我对路线的单元测试
beforeEach(async(()=>{
class AuthStub{
private loggedin: boolean = false;
login(){
return this.loggedin = true;
}
};
class RouterStub{
navigateByUrl(url:string){return url;}
}
TestBed.configureTestingModule({
declarations: [ HomePageContentComponent ],
providers:[
{provide: Auth, useClass:AuthStub},
{provide: Router, useClass: RouterStub}
]
})
.compileComponents()
}));
beforeEach(()=>{
fixture = TestBed.createComponent(HomePageContentComponent);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('.loginbtn'));
el = de.nativeElement;
fixture.detectChanges();
});
it('Should log in and navigate to dashboard', inject([Router],(router:Router)=>{
const spy = spyOn(router, 'navigateByUrl');
el.click();
const navArgs …我试图将布尔值的状态从子节点更改为父节点.这就是我到目前为止所拥有的.
子组件
@Input() state: boolean;
@Output() show = new EventEmitter();
@Output() hide = new EventEmitter();
onHover() {
this.state = true;
this.show.emit(this.state);
console.log("state is " + this.state);
}
onHoverOut() {
this.state = false;
this.hide.emit(this.state);
console.log("state is " + this.state);
}
child.html
<a (mouseover)="onHover(show.state)" (mouseleave)="onHoverOut(hide.state)">random Link</a>
父组件
@Component({
selector: 'my-app',
template: '<h3 (show)="toggleState" (hide)="toggleState">toggle state: {{boolshow}}</h3>',
})
export class AppComponent {
toggleState: boolean;
boolshow = this.toggleState;
}
当我将鼠标悬停在链接上时,我没有看到{{boolshow}}发生变化.任何帮助都会很棒,谢谢.
我在 Visual Studio 的 2019 项目中安装 vuetify 时遇到问题。我正在使用 vuetify 2.3.4 和 vuetify-loader 1.6。Vuetify 似乎正在工作，因为我可以看到在我的 v-btn 标签之一上呈现的样式。但是控制台仍然显示以下错误“TypeError: Vue.observable is not a function”。我尝试了一些谷歌搜索，但没有找到其他人发布过关于他的问题。任何想法将不胜感激。
这是一些相关的代码：
主要.js：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Vuetify from 'vuetify';
import vuetify from './plugins/vuetify'
Vue.use(Vuetify);
Vue.config.productionTip = true;
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount('#app');
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
索引.html
<v-app>
<div id="app"></div> …