Comments (15)
IMO integration with the router, or some alternative API, is an absolute necessity. I ran into this limitation about 30 minutes into trying to build a serious app, and others will as well.
from nativescript-angular.
@hdeshev is there any work-around? I am new to Angular and maybe its me, but can't think of a way to have two pages and navigate between them without router. This won't do topmost().navigate("views/calendar") :)
We have a native app in the stores and want to re-write it from scratch with {N} + Angular 2. Not really complicated but still will have more than a single view.
from nativescript-angular.
We're working on something that seems promising, but has some issues on iOS. I'll probably document it, push it to master this week and improve it later.
from nativescript-angular.
Very exciting! :)
On Wed, Jan 13, 2016 at 3:30 AM Hristo Deshev [email protected]
wrote:
We're working on something
https://github.com/NativeScript/qsf-angular-nativescript/blob/hdeshev/page-route/app/app-page.ts#L29-L161
that seems promising, but has some issues on iOS. I'll probably document
it, push it to master this week and improve it later.β
Reply to this email directly or view it on GitHub
#18 (comment)
.
from nativescript-angular.
@MiroValchev I have a workaround in my Groceries sample as well, but itβs definitely a bit hacky for now, so Iβm also anxiously awaiting @hdeshevβs magic too π
from nativescript-angular.
Totally +1. Any progress on this?
I personally really like the $stateProvider way, which is how Angular ui-router (Angular 1.x) does the routing. I'm completely new to Angular 2, but I think routing is a must and the Angular guys made some great progress on this aspect.
from nativescript-angular.
There was a merge today into mater related to the router:
nsRouterLink directive looks interesting. It should be all there to set up the route config + base now.
from nativescript-angular.
When I change page, angular destroys all components , and renders them again .
Is it possible to change page without destroying the components .
from nativescript-angular.
@anhoev Can you share some more info. Are you using the page-router-outlet
?
Btw, there is already a working sample here for reference on how to use the page navigation.
from nativescript-angular.
@vakrilov I am using page-router-outlet . I 've tried the qsf example but that one has the problem too.
I wrote two logging line in ExamplePreviewComponent 's constructor :
console.log('Example Preview Component'); console.log('Rerender here');
and every time , when i click back and click the example again, it shows two logs in console.
The root page seems to work ok , only child-page.
If you write only one time console.log, it shows the log after 6-7 times.
In common usage nobody would recognise this problem because angular 2 works very fast. However, in some complicated case, the re-rendering time takes too long.
from nativescript-angular.
I have encountered the same issue as @anhoev on the page double loading components after the navigation changes (in my own project) and have put some workarounds for some observable subscriptions to understand that the controls are being destroyed... I could just dispose of it.... but laziness :) (and it doesn't stop the double HTTP requests to get data).
I have some odd styling artifacts after navigation as well. Stack Panels in one of my components will get some extra padding (only after the first navigation, when the action bar jumps in). Navigating somewhere and back again fixes it to look like normal again.
from nativescript-angular.
I think some more clarification about the navigation in NativeScript is needed.
When navigating to a new page, the old page is put in the navigation stack. Under the hood, the navigation uses the corresponding native APIs: UINavigationController
(IOS) and FragmentManager
(Android). So, the old page still lives in the navigation stack. That's why, when you navigate back to it, no constructors for the NG components are called - only the activate
method.
On the other hand, when navigating back, the current page is not saved anywhere - it is discarded. That's why when you navigate forward to the same route a new host page is created and also a new instance of the component.
That should explain why the constructor for your start component is called only once , but when navigating forward and back to a second page - it is created every time.
One thing you can do, is to use the DI and a service to cache your data to avoid unneeded HTTP requests.
from nativescript-angular.
@matt4446 About that styling issue - it looks like a bug, Can you share some code so that we can reproduce it.
from nativescript-angular.
@vakrilov If I can.
I changed my CSS rules (and containers) about a week ago so that it didn't reproduce on navigation, but I think that I remember what caused it (it's in github's history as well). Stack Panels seemed to inconsistently choose margin / padding based on if the nav bar was present on the page. That is a little presumptuous, however... I'll see if I can create it again.
from nativescript-angular.
@matt4446 Can you open another issue if you manage to reproduce it? Also we made some changes in the Page layout when showing/hiding the action bar so it is possible that this issue is fixed with the newer version of the NativeScript modules.
Closing the issue - there is an example with nested navigation here and we will start working on the docs soon.
from nativescript-angular.
Related Issues (20)
- Livesync doesnt work with two android emulator
- ngFor broken in child components with delayed initialization HOT 1
- [Android] Keyboard overlap content when router in use
- ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: HOT 7
- Question - Showing an nativescript angular app in a angular website HOT 4
- Nativescript/Angular app UI is freezing HOT 5
- Angular 12 migration leads to huge amounts of Change Detection cycles HOT 1
- Nativescript iOS & Android runtime issue module not found
- (android) Navigation does not work when the app is started while the device is locked HOT 4
- Cannot read property 'call' of undefined
- iOS 15 status bar issue HOT 1
- [Element] is not a known element HOT 1
- [iOS] Issue while opening dialogs inside a modal
- Error on run blank Angular project HOT 2
- Android : ModalDialogOptions in Nativescript/Angular fails and throws an exception
- Wrapping a spec in fakeAsync results in ProxyZone error on a new app HOT 2
- Generate component does not add automatically to module
- bottom navigation bar nativescript
- Error: Need to call TestBed.initTestEnvironment() first
- FontAwesome 6 icons not showing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-angular.